Gulp Tutorial with Examples

Gulp is a way to automate processes that one might have when building a system with JavaScript. It is at the moment the fastest build processor leaving behind the old school Grunt which was the previous winner.

The main thing in Gulp are the tasks. These are some examples about what the tasks usually are:

  • Compiling CSS with your favorite technology for example: Sass, LESS, Stylus
  • Minifying CSS
  • Compiling JavaScript with your favorite bundler for example: Browserify, require.js, plain nodejs, or something else
  • Minifying or Uglifying JavaScript
  • Cleaning folders and moving files from one place to another
  • Watching for changes in a folder and start processes if changes happen

Sounds cool right? There are a lot of tasks and automation you can achieve with Gulp. These tasks usually take a lot of time if needed to be done manually. The great thing with task runners is that when you do the tasks, everybody on the project can use them. One developer running tasks by hand is not that bad but if the number becomes two or usually more the benefits of these automated processes become solid.


I have tested this installation process on Ubuntu 14.04 and 16.04. First you need to have nodejs on your system. You can get it from here

Thats it, now you should have an npm project and a gulp saved to it. Then open up your package.json file on a editor and add gulp script to there:


Gulp always needs a gulpfile. Create gulpfile.js in the folder.

Here we have a fully functioning automated Gulp task. It is nice to include a default task so you can run gulp with:

Otherwise you need to append the task name to the command.

Chaining and ordering tasks

Often a bit time after the initial Gulp configuration you tend to need to do tasks in certain order. In Gulp this has been done extremely easy. Lets modify our default task.

What this actually does is, it runs ‘sometask’ and then ‘someothertask’ and after those it runs the default task. This way you can order the tasks the way you want and create different combinations.

Sass task

Minify CSS task

Browserify task

Uglify task

Clean task

Watch task

Gulp 4

Gulp 4 is the new version of Gulp which has been in development for a quite some time and the release is coming close. The old ordering style in Gulp 3 has a lot of problems and bugs that the developers chose to fix by developing a new major version of Gulp. You can install it with:

The main difference there is the chaining process which changes to a more clean and simple solution. In Gulp 4 the ordering happens with functions.

Notice that this doesn’t work with Gulp 3.

Here we have a default task with processes going in the order of

  1. Clean
  2. Sass at the same time as Uglify after Browserify
  3. Finally Watch

So with:

you can run tasks in series followed by each other, and with:

you can run tasks side by side at the same time