Gulp is a JavaScript task runner. It’s an alternative to Grunt, which allowed you to define your tasks using JavaScript inside of a file called Gruntfile.js. In this tutorial, I’ll show you how to install Gulp and create a simple configuration file to get your feet wet with this great new task runner.

Why Gulp?

Compared to Grunt, Gulp runs much faster. Tasks get crunched quicker, and the time you spend between writing code and seeing the changes in the browser is significantly less. Why is this? According to Gulp, it uses the power of node streams, giving you fast builds that don't write intermediary files to disk.

Installing Gulp

Gulp.js comes packaged as a Node module making it incredibly easily to install using NPM(Node Package Manager). To install Gulp, open up your terminal and type in the following:

npm install -g gulp

This pulls Gulp from the npm registry and configures it globally on your system so you can access via command-line.

Setting Up A Gulp Project

If you don't have node set up on your machine, go ahead and do so. The npm command line tool comes bundled with node, so you'll be ready to roll after this. Next, create a new project directory, and cd into it. Let's initialise our directory by running the following command:

npm init

Before installing Gulp, there are few things that need to be done inside your project's directory.

Install two dependencies packages

Install any plugins you'd like to use

Create a Gulp.js file to define the tasks you'd like to run

First, let's install the dependencies:

npm install gulp gulp-util --save-dev

Now, we'll need to install the Gulp plugins that will perform the tasks that we define in our configuration file. These plugins are also Node package modules so we'll use npm again to install them.

npm install gulp-uglify gulp-concat --save-dev

In this case, we are installing two plugins which will minify/compress JavaScript code using the Uglify.js compressor and concatenate all JavaScipt files into a single source file.

{
    "devDependencies": {
        "gulp-util": "~2.2.13",
        "gulp": "~3.5.0",
        "gulp-uglify": "~0.2.0",
        "gulp-concat": "~2.1.7"
    }
}

Gulp offers over 200 plugins for all types of functionality including:

LiveReload

JSHint

Sass

CoffeeScript file compilation

Configure Gulp.js File

Create a gulpfile.js at the root of your project:

var gulp = require('gulp');

gulp.task('default', function() {
    // code for default task
});

Run Gulp:

gulp

There you go, we're ready to begin using gulp. At this point, we can successfully run gulp from the command line, and all will be well. It's a bit useless at this point though, so let's set up some dummy files and implement some tasks.

First, let's configure our directory structure like this:

  gulpfile.js
  package.json
  src/
    js/
  dist/
    js/
    css/

In the src/js directory, create two JavaScript files and populate them like this:

function helloWorld() {
    console.log("Hello World!");
}

function goodbyeWorld() {
    console.log("Goodbye World!");
}

Now lets tell Gulp which plugins are required to complete the defined tasks.

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

Next up, we need to define the tasks that will be run by Gulp. In my case, I'm looking to do two things:

Compress images

Minify my JavaScript files

Defining a task is for all intents a JavaScript call. We use the Gulp method task() to define the task we want to run:

gulp.task('js', function () {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

Taking this a step further, Gulp also provides another method called watch() which provides a means for automatically checking a specific resource for changes. This allows for great automation of tasks versus constantly having to manually type in gulp at the command line.

gulp.watch('./js/*', function () {
    gulp.run('js');
});

When this runs, Gulp will continue to monitor the specified directly for changes to files and if a change occurs, will re-run the js task to minify and concatenate the JavaScript files. Awesome!