A Re-Introduction to Gulp

Forget everything you know about Gulp. Welcome to Gulp 4.

If you’re a front-end developer you surely have a build process in place. You maybe using Grunt, Gulp, Broccoli, NPM scripts etc. If everything works for you and you understand everything in your build process, you should stop reading now and focus your energy elsewhere.

If, however, you’re confused or just want to learn a little more about Gulp hang around.

Using Multiple Files to Organize Tasks. #

If you currently break your gulpfile into multiple files, you probably make a folder called gulp and using something like require-dir to import it all.

While this works for now, it has the effect of making your build process harder to read.

Instead, keep things more explicit. This happens in two steps.

Firstly, start writing you gulp tasks as simple functions and attach them to gulp.task separately.

So, instead of writing this:

gulp.task('taskName', function(){
  // task here
})

Do this:

function taskName(){
  // task here
}
gulp.task('taskName', taskName)

Now, just export functions in the files in your gulp folder. Import them and register them in your gulpfile manually. This makes things more explicit, and you get all your tasks in one place again.

Plus, with Gulp 4, you will be able to get rid of the gulp.task business altogether. Soon you’ll be able to just export functions in your gulpfile.

export function taskName(){
  // task here
}

This also means you task functions are all more re-usable by default.

Use ES6. #

Using ES6 in your gulpfile has been possible for a while.

• Step 1: npm install --save-dev babel babel-preset-es2015
• Step 2: Create a .babelrc file: { "presets": ["es2015"] }
• Step 3: Rename gulpfile.js to gulpfile.babel.js

Use Libraries when needed #

Gulp has always been quite fast because it used Node Streams and did things in parallel. However, Node streams have a low-level API and can be slightly hard to deal with.

Instead, consider using a library like Highland.js or RxJS (with rx-node) to make your life simpler when writing complex logic in your gulp tasks.

Don’t over-rely on gulp dependencies. #

Gulp has a simple way to define the dependencies you want to run before the current one.

gulp.task('taskName', ['dependency1', 'dependency2'], function(){...})

This is nice and simple