Up and Running with gulp

Become a Subscriber

Gulp is a Node.js program used as a build system or task runner. Gulp uses Node.js streams to quickly read, write, and modify files in a project.

A gulp.js project file contains tasks usually associated with gulp plugins. Many gulp plugins are available for automating tasks that reduce page weight, increase site performance, and more.

Installing gulp

Since gulp is a Node.js program, installing Node.js is required. The terminal command npm uses the Node.js package manager to download and install gulp.

Install gulp globally through terminal

npm install --global gulp

Install gulp in your project’s package.json:

npm install --save-dev gulp

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

var gulp = require('gulp');

gulp.task('default', function() {
  // code for a default task would go here
});

Run gulp:

gulp

Adding gulp Plugins

There are over 1,600 plugins for gulp, and custom plugins can be written too. Plugins are installed per project using the Node.js project manager. In this example, the plugin gulp-minify-css is used to create optimized versions of css files.

npm install --save-dev gulp-minify-css

When the plugin is installed, the plugin itself is added to the project’s node_modules folder and the plugin is listed as a new dependency in the project’s package.json file. In order to use the plugin with gulp, the plugin must be referenced in the gulp.js file:

// Include gulp
var gulp = require('gulp'); 

// Include plug-ins
var minifyCss = require('gulp-minify-css');

// Minify CSS task 
gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')  // Source: Any css file in the styles folder
    .pipe(minifyCss({compatibility: 'ie8'}))  // Configure plugin-specific options
    .pipe(gulp.dest('dist'));  // Destination: The dist folder
});

Gulp must be included using require, and so do any necessary plugins like minify-css as used above. The gulp task method creates an action that can involve one or more plugins. Typically, each task will start with gulp’s src method to identify the files that will be copied or modified. After intermediary steps like configuring minify-css’s option for compatibility with IE8, a task will finish with gulp’s dest method to identify where modified or created files will go. Data flows from sub-task to sub-task, using gulp’s pipe method which relies on Node.js’s streams to handle I/O.

Run gulp

After plugins are installed and the gulp file is ready, running the file is as simple as entering gulp on command line.

It is common to create a set of favorite post-development tasks that are automated with gulp or another task runner. Many developers who use gulp will use the same boilerplate gulp.js from project to project because it automates the finishing steps that are necessary with every project they work on.

Clean up gulp.js

Here is an example of a longer gulp file that incorporates some ways to keep code clean when adding more and more plugins.

// Include gulp and all plugins
var gulp = require('gulp'),
    jsValidate = require('gulp-jsvalidate'),
    minify-css = require('gulp-minify-css'),
    htmlmin = require('gulp-htmlmin');

// Use an object to manage each plugin's references
var config = {
    jsValidate: {
        src: 'js/*.js'
    },
    minify-css: {
        src: 'styles/*.css',
        dest: 'dist/css'
    },
    htmlmin: {
        src: 'templates/*.html',
        dest: 'dist/html'
    }   
 };

// Create a function for each plugin
function validateJavaScript(){
    return gulp.src(config.jsValidate.src)
        .pipe(jsValidate());
}
function compileMinifiedCSS () {
   return gulp.src(config.minify-css.src)  
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(gulp.dest(config.minify-css.dest));  
}
function compileMinifiedHTML () {
   return gulp.src(config.htmlmin.src)
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(config.htmlmin.src))
}

// Define individual tasks
gulp.task('jsValidate', function() {
    return validateJavaScript();
});
gulp.task('minify-css', function() {
    return compileMinifiedCSS();
});
gulp.task('htmlmin', function() {
    return compileMinifiedHTML();
}); 

// Define grouped tasks
gulp.task('minify', ['minify-css', 'htmlmin']);

// Define the default task
gulp.task('default', ['jsValidate', 'minify-css', 'htmlmin']);

An object can be used to organize plugin references, especially file and folder locations. Each plugin task can be encapsulated in a function that will be run using a gulp task. Tasks are defined individually, and individual tasks can be grouped by listing them as dependencies of a grouped task. The default task is the catch-all group task intended for general use.

The default task is executed using the command gulp. Individual and other grouped tasks can be ran using the command gulp plus the task name. In the above example, gulp minify-css would only execute the ‘minify-css’ task and gulp minify would run both the 'minify-css’ and 'htmlmin’ tasks which are listed as dependencies of the 'minify’ group task.

Gulp simplifies the process that many developers go through when building or optimizing parts of an application. Gulp’s extensibility and ease of use have made it a favorite tool among the Unicorn team and many other happy developers.