Gulp is a JavaScript based task runner^1 supported by a wide range of plugins. It can be used to automate otherwise tedious, time-consuming and repetitive jobs such as compiling, minifying and optimising assets. The tasks defined in our Gulpfile's allow us to organise and maintain code in ways we couldn't previously.

The gulp tasks used on this site have enabled page load times to be halved and vastly reduced the bandwidth required for each page.

Installing

Gulp is installed using npm (Node Package Manager), which comes bundled with Node.js and can be downloaded here. If you are on a Mac however, I would recommend installing Homebrew and running the command brew install node.

Once Node.js is installed, install Gulp globally:

$ npm install gulp -g

(sudo might be required for this step).

Run npm init from inside your projects directory and follow the steps to create a new package.json file. The package.json file specifies what Node packages should be installed for this project.

Gulp also needs to be installed locally with npm install gulp --save-dev. The --save-dev argument means that Gulp will be added as a dependency in package.json, so that next time, all packages can be installed using $ npm install.

Creating our first task

Now that Gulp has been installed, our first task can be added. Create a Gulpfile.js in the project root, with the following contents:

var gulp = require('gulp');

gulp.task('default', function() {

});

Execute the task by simply running $ gulp

The following contents should appear:

$ gulp
[13:12:23] Using gulpfile ~/Repos/testing/gulpfile.js
[13:12:23] Starting 'default'...
[13:12:23] Finished 'default' after 40 μs

Congratulations! Gulp has now been installed and is ready to be used. Search the Gulp plugins directory for modules that will help your workflow. Plugins can be installed in a similar way: npm install gulp-{plugin-name} --save-dev.

Obviously this task doesn't actually do anything, so lets change that. Tasks could be added to shave a few kilobytes from the Javascript or CSS files, but it is far more effective to simply minify a couple of images. First, install the required plugins, $ npm install imagemin-pngquant gulp-imagemin --save-dev, then create the task:

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');

// Change default task to use compress_images task
gulp.task('default', ['compress_images']);

// Compress png images from images/ folder
gulp.task('compress_images', function () {
   return gulp.src('images/**')
       .pipe(imagemin({
           progressive: true,
           use: [pngquant()]
       }))
       .pipe(gulp.dest('_site/images'));
});

This time, the task output looks like this

$ gulp
[19:41:39] Starting 'images'...
[19:42:08] gulp-imagemin: Minified 33 images (saved 2.49 MB - 41.9%)
[19:42:08] Finished 'images' after 30 s

The task can be started manually every time the images change, or a "watcher" task can be created to run the task automatically. This will be covered later.

Now that Gulp is installed and ready to use, checkout some advanced tasks to really speed up your workflow and improve your projects.

If you have any feedback or questions, please leave a comment below.