1

I have a gulp project I inherited.

I am supposed to be migrating gulp v3 to v4.

However, I cannot find a gulpfile.js in this project at all. Yet, every tutorial requires one. I am assuming there is some setup where the last developer knew about which is probably outdated?

Here is my folder structure:

enter image description here

All tasks are grouped in the Tasks folder. I want to say these exported with the root files which actually run those tasks files are my "gulpfiles".

All gulp tasks are ran using: node platform/build.js or node platform/deploy.js

I can make changes to this and everything, I see how he called it and wrote tasks. But I don't know the paradigm he is using to do this so it's difficult to know where to start migrating this to gulp v4.

Gulp libraries we are using:

"gulp": "3.9.1",
"gulp-autoprefixer": "6.0.0",
"gulp-bundle-assets": "2.29.0",
"gulp-concat": "2.6.1",
"gulp-csso": "3.0.1",
"gulp-data": "1.3.1",
"gulp-ejs": "3.3.0",
"gulp-empty": "0.1.2",
"gulp-eslint": "5.0.0",
"gulp-htmlmin": "5.0.1",
"gulp-if": "2.0.2",
"gulp-imagemin": "5.0.3",
"gulp-rename": "1.4.0",
"gulp-replace": "1.0.0",
"gulp-rimraf": "0.2.2",
"gulp-sass": "3.2.1",
"gulp-sass-lint": "1.4.0",
"gulp-sourcemaps": "2.6.5",
"gulp-string-replace": "1.1.2",
"gulp-strip-comments": "2.5.2",
"gulp-webserver": "0.9.1",

How it runs gulptasks:

// STEP 1 - process.env.NODE_ENV to staging
(!process.env.NODE_ENV) && (process.env.NODE_ENV = 'staging');


// STEP 2 - Prevent from running on NON-CI
if (!process.env.CI) {
  throw new Error('Build can only be performed in CI Environment');
}


// START PROCESS
const _ = require('lodash'),
  gulp = require('gulp'),
  Tasks = require('./tasks'),
  runSequence = require('run-sequence').use(gulp),
  // This of the tasks here is the order in which they will executed
  taskMap = {
    'clean:dist': Tasks.cleanDist,
    'clean:tmp': Tasks.cleanTemp,
    'copy:assets': Tasks.assetCopy,
    'bundle': Tasks.bundleAssets,
    'transpile': Tasks.transpile,
    'prefixCss': Tasks.autoprefixCss,
    'sitemap': Tasks.sitemap,
    'robots': Tasks.robots,
    'remove:htmlext': Tasks.removeHtmlExt
  };

// Create all tasks
_.forEach(taskMap, (value, key) => {
  gulp.task(key, value);
});

// @todo: Shift to using gulp.series when gulp is upgraded to v4
gulp.series(..._.keys(taskMap))();
9
  • I guess that build.js just calls gulp with gulpfile flag: gulp buidltask --gulpfile tasks/index.js, thats why you don't have gulpfile.js. You can probably migrate everything to gulp4 and everything will be fine as long as there are no task defined elsewhere. Commented Aug 27, 2019 at 21:54
  • I'll share the code in there so you can see how it runs it. Commented Aug 27, 2019 at 21:55
  • 1
    Not sure which pattern he chose, probably just separating gulp tasks from other logic. As it seems all functions are defined in tasks folder, and in the build.js you are creating tasks from the imported functions. Not sure how they are run, my guess is with run-sequence. You can keep functions in task folder as they are, seems they are atomic and just create your own pipeline how they should be run with gulp series/parallel instead of using taskMap object. Commented Aug 27, 2019 at 22:09
  • 1
    is there "scripts" defined in package.json ? If so, he could have used gulp -f build.js to use build.js instead of gulpfile.js . And he may have written a command in scripts. Use it via npm run <command_name> Commented Aug 27, 2019 at 22:11
  • 1
    As a note I'm assuming that all functions in tasks folder are just functions returning gulp streams, but they might still be using run-sequence, which in gulp4 is unnecessary or not returning streams/callbacking so they should be refactored. Also as it seems all tasks are run in series, so the pipeline could probably be optimized too. Commented Aug 27, 2019 at 22:22

2 Answers 2

1

A gulpfile is really just a chunk of Javascript code - it's named with a default name so when you run gulp it finds it by default.

You actually have gulpfiles - they're each of those individual .js files you're talking about.

I suspect they were split up this way because somebody thought there were too many tasks in each one and wanted to separate them by "topic" somehow.

Sign up to request clarification or add additional context in comments.

2 Comments

this is what I'm thinking as well. But answers like the one below: stackoverflow.com/a/57682790/4775199 -- is the reason I want to ask before changes. Thank you!
I guess it is not really the recommended way to split gulp tasks into separate files - see gulpjs.com/docs/en/getting-started/… . If you use the linked version you probably could just do gulp build instead of node platform/build.js but both work so it is up to you.
1

I inherited a project that used Gulp with no gulpfile a while back. It turned out it was actually inside of a shared gulpfile which was hosted on npm (like https://github.com/jonathantneal/gulp-config-dev). Long shot, but perhaps it's listed as a dependency in package.json.

1 Comment

this is the reason I ask before pushing these things to production rather than just assume. I don't see that in our dependencies and believe he just split it up due to size but this is great thank you so much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.