Using gulp to pipeline front-end builds

We have previously seen how to use grunt to automate the front-end builds. We will see how to do the same work with its alternative tool called gulp.

Getting started with gulp

The gulp website says

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

It provides an intuitive way to pipeline our builds. Install gulp-cli globally with

npm install --global gulp-cli

Change to your project directory and create a file named gulpfile.js and add the following content to it.

var gulp = require('gulp');

gulp.task('default', function() {
    // Code for default task
    console.log('Executing the default task.');
});

This file holds the definitions of all the gulp tasks. gulp is imported into the gulpfile.js with var gulp = require('gulp'); (this is the standard node syntax to import node modules). A gulp task cab be defined with the syntax

gulp.task('<task_name>', function() {
    // Code for default task
});

The function thus defined can be executed (using gulp) with

gulp task_name

If we do not specify any task to gulp, it will look for a task named 'default' and run it. Now that we have a valid gulpfile.js we can test it with

gulp

The output will look something like this.

[11:44:32] Using gulpfile ~/cowhite/blogtest/gulptest/gulpfile.js
[11:44:32] Starting 'default'...
Executing the default task.
[11:44:32] Finished 'default' after 163 μs

The gulp.task method also takes an optional argument, an array of tasks that need to be completed before executing the task function.

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
    // Do stuff
});

The task function will be executed only after all the tasks in the array are completed successfully. We can also omit the function definition as in

gulp.task('mytask', ['array', 'of', 'task', 'names']);

This will then act as an alias for all the given tasks. The task mytask will just run the depending tasks and nothing more. Note: The tasks in the dependency array will run in parallel, so we can't assume the order of starting or finishing of those tasks.

Now that we know how to define a gulp task, we are ready to streamline our build.

Compiling Sass to CSS

Create the following directory structure for the project.

+ project_root/
| + dist/
| + src/
| |+ scss/
| `+ js/
|- gulpfile.js
`- package.json

Create a .scss file in the src/scss directory with the following contents.

.container {
    .right {
        text-align: right;
    }
}

Now create a task named 'complie-sass' as follows

gulp.task('compile-sass', function() {

});

We will use the gulp plugin gulp-sass which can be installed with

npm install gulp-sass --save-dev

Then import the plugin into gulpfile.js with

var sass = require('gulp-sass');

We import files into gulp with

gulp.src('path_of_files')

This returns a stream of files which can be piped to plugins. Piping is a nodejs method of pushing a data stream to other node writable and how they work is out of the scope of this post.

Read our all the .scss files from src/scss with

gulp.src('src/scss/*.scss');

The returned stream must then be pipelined to sass plugin.

gulp.src('src/scss/*.scss')
     .pipe(sass());

The sass plugin will compile the .scss files (with default configuration) and the resulting data is returned as another stream. The data can be saved with gulp.dest method like this.

gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));

Then make this task a dependency to the default task with the statement

glup.task('default', ['compile-sass']);

Our final gulpfile.js file content is

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('compile-sass', function() {
    gulp.src('src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', ['compile-sass']);

Now run gulp with

gulp

The output is

[14:06:59] Using gulpfile ~/cowhite/blogs/gulptest/gulpfile.js
[14:06:59] Starting 'compile-sass'...
[14:06:59] Finished 'compile-sass' after 20 ms

This will compile the .scss file src/scss/main.scss and the result is stored as dist/css/main.css.

Minifying javascript with gulp

Everything is easy once we know how gulp works. We will now use gulp-uglify to uglify javascript files. Install it with

npm install --save-dev gulp-uglify

Once installed, import the plugin in the gulpfile.js with statement

var uglify = require('gulp-uglify');

Then create the task 'uglify' as follows

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

And add it to the 'default' task's dependencies.

 gulp.task('default', ['compile-sass', 'uglify']);

Once done, we can uglify js files present in src/js/ directory with

gulp

All the js files will be uglified and the resulting files will be stored in dist/js/.

Handling errors with pump

Errors in node are not propagated through the chain of streams. All the other plugins are unaware of any error that occurred in one of the plugins. Hence the streams are not automatically closed when one plugin fails.

pump helps us handle such situations. pump is just a wrapper around the gulp's pipe functionality that takes care of handling of errors. All the piped actions can be passed to pump as an array of actions as follows.

pump([action1, action2, ...])

Pump will run each of the action and pipe its result to the next one. For example, our uglify task can be re-written with pump as follows.

pump([
    gulp.src('src/js/*.js'),
    uglify(),
    gulp.dest('dist/js')
]);

The re-written gulpfile.js that uses pump looks like this

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var pump = require('pump');

gulp.task('compile-sass', function(cb) {
    pump([
        gulp.src('src/scss/*.scss'),
        sass(),
        gulp.dest('dist/css')
    ], cb);
});

gulp.task('uglify', function(cb) {
    pump([
        gulp.src('src/js/*.js'),
        uglify(),
        gulp.dest('dist/js')
    ], cb);
});

gulp.task('default', ['compile-sass', 'uglify']);

The gulp tasks can be run just as before with the command gulp. Hope this helps you in your development.