Gulp served me well as my favorite “task runner” for quite a while. Although I’ve moved onto Webpack for all new projects, this legacy setup is still heavily used.
Here is the main gulpfile.js, which serves as the entry point for requiring JSON config files and setting up watchers.
gulpfile.js
I create a separate gulp directory for config and task files. The first require loads the main config file.
gulp/config.js
Then the index file for the last require call
// Loads the gulp directory index file
require('./gulp');
I’m setting some globals here, global is essentially the same as window in the Node environment. I require a couple more handy Node modules (fs & path) along with Gulp’s enhanced console, gutil. Then I assign the tasks constant to read the tasks/ directory and filter out any irrelevant files. readdirSync is the synchronous file system reader, as we do want to block here so the tasks can properly initialize.
At this point it’s as simple as taking advantage of Node’s built-in ES6 properties and run a forEach loop to require each task. Gutil outputs a blurb to let us know when each task is loaded.
On to our tasks, we use Browser Sync for hot reloading:
gulp/tasks/browserSync.js
gulp/tasks/fonts.js
gulp/tasks/images.js
gulp/tasks/scripts.js
There’s quite a bit going on here. Essentially we’re setting up Browserify and Babel to handle transpiling our ES6 code, using Babelify as a Browserify “transform”. The bundle() function is a bit hacky, but it gets our initial transpilation started. Subsequent updates to our JS code will be handled by the gulp.task(‘scripts’, function() { task, which watches for errors and outputs information on how long it took to bundle our code.
gulp/tasks/styles.js
We introduce PostCSS processors here, although just autoprefixer for the base template. Then we can introduce some interesting options with gulp-if, based on whether we’re in dev or production mode. global.devOverrides does what you would expect, it allows us to test some settings and optionally include PostCSS modules without having to switch over to production.
handleErrors is a small utility file, here’s what it looks like:
'use strict';
let notify = require('gulp-notify');
let plumber = require('gulp-plumber');
module.exports = function(error) {
console.log( 'An error has occured: ', error.message );
this.emit( 'end' );
};
Our last task is mainly CMS’es, mainly for WordPress use.
gulp/tasks/themeImages.js
There is some refactoring to be done throughout, feel free to hack on it! The directory structure is something like this:
-- themeDirectory
-- gulpfile.js // entry point
-- gulp
-- config.js
-- index.js
-- tasks
-- browserSync.js
-- fonts.js
-- images.js
-- scripts.js
-- styles.js
....... rest of tasks
-- util
-- handleErrors.js