Gulpv4 Splitting Up Gulpfile

In the Gulpjs Getting Started there is a blurb on “Splitting a gulpfile”. Over the history of Gulpjs there were a few ways to split up tasks. With the latest, the v4 way, it is a lot more refined. Here is my exploration of this feature.

First create a folder named gulpfile.js/ and drop in task files.

gulpfile.js/
├── clean.js
├── css.js
// 
// clean.js
//
exports.clean = function clean(done) {
  // task implementation
  
  done();
}
// 
// css.js
//
exports.css = function css(done) {
  // task implementation
  done();
}

Finally, add index.js file to combine the tasks and expose public tasks.

const { series } = require('gulp');
const { clean } = require('./clean');
const { css } = require('./css');
exports.default = series(clean, css);

Our gulpfile.js/ folder now looks like this

gulpfile.js/
├── clean.js
├── css.js
└── index.js

This way we can hide the private tasks such as clean and css.

$ gulp --tasks
[11:05:15] Tasks for ~/dev/gulp-demo/gulpfile.js
[11:05:15] └─┬ default <-- public
[11:05:15]   └─┬ <series>
[11:05:15]     ├── clean <-- private
[11:05:15]     └── css   <-- private

At the same time with --gulfiles switch

…it allows you to test each task independently…

$ gulp --tasks --gulpfile gulpfile.js/clean.js 
[11:08:43] Working directory changed to ~/dev/gulp-demo/gulpfile.js
[11:08:43] Tasks for ~/dev/gulp-demo/gulpfile.js/clean.js
[11:08:43] └── clean
$ gulp --gulpfile gulpfile.js/clean.js clean
[11:09:40] Working directory changed to ~/dev/gulp-demo/gulpfile.js
[11:09:41] Using gulpfile ~/dev/gulp-demo/gulpfile.js/clean.js
[11:09:41] Starting 'clean'...
[11:09:41] Finished 'clean' after 4.04 ms

Happy gulping. 😀