Introduction to Gulp

Nowadays, front-end workflow requires developers to run many repetitive tasks such as :

  • minification of assets
  • images compression
  • compilation or transpilation
  • preprocessing CSS (Sass, Less, Stylus)

All these tasks don’t need to be ran manually. How about if we use automation for these kind of tasks? Using a task runner tool is the answer to this question. Basically, Gulp and Grunt are task runners which handle these tasks. However, Gulp prefers code over configuration. The tasks are defined by writing code. This allows the creation of tasks that fit our very specific needs at CrossKnowledge.

Get started with Gulp

Gulp works on a NodeJs environment. So please install Node on your machine, if it is not already done!

Then, install Gulp globally with this command: npm install -g gulp.

Installing globally a package allow you to use the package in your shell / command line as the binaries end up in your PATH environment variable.

In order to use Gulp you have to create a gulpfile.js to your project root. Gulp’s API is very simple and is composed of 4 functions:

  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

Let get started by creating our first task by using gulp.task to define a task:

// gulpfile.js
var gulp = require('gulp');

gulp.task('taskName', function() {
	// do something
});

Write a gulpfile.js

Create a basic task

One of basic automation tasks is, for example, the minification of our javascripts. This tasks expose the main API of Gulp so you can create a simple and functional example.

First of all, please install the plugin gulp-uglify: npm install --save-dev gulp-uglify. This plugin will handle the minification of your javascript files.

The --save-dev option writes the dev dependencies into your package.json. When you execute npm install command from your directory where package.json is located, it will install all dependencies required by your project.

Note that there is a shortcut for the --save-dev option. npm install -D gulp-uglify will do exactly the same thing than npm install --save-dev gulp-uglify.

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

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

Important: gulp-uglify leads to an ‘error’ event when it is unable to minify a specific file. Until the release of Gulp 4.0 you need to handle it or use the gulp-plumber plugin.

To run this task, just run gulp minify-js.

Add another tasks

If you want to use a CSS preprocessor such as Sass, Gulp is the perfect match. Install the according plugin and here we go: npm install --save-dev gulp-sass

// gulpfile.js
var gulp = require('gulp');
vqar sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('./src/styles/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));
});

Here again, you need to use gulp-plumber if you got the ‘error’ event and if you don’t want the process to crash.

To run this task, just use gulp sass.

Now, let see a last task. We built some files with Gulp. But maybe you don’t want to delete the generated files yourself. So let’s create a ‘clean’ task

We will use del: npm install --save-dev del

var gulp = require('gulp');
var del = require('del');

gulp.task('clean', function() {
    del(['./dist/css/*',
        './dist/styles/*'
    ]);
});

Default tasks

Ok, now we have 2 tasks. We launch them with gulp my_task. Imagine if you have dozen of tasks? Or if you want a task A when the task B is completed?

Run several task in parallel

Now we create a ‘build’ task which run ‘sass’ and ‘minify-js’ tasks simultaneously.

gulp.task('build', ['sass', 'minify-js']);

When you run the ‘build’ task with gulp build, Gulp will start ‘sass’ and ‘minify-js’ tasks.

Checkout run-sequence package if you want to run a specific order of dependent gulp tasks.

Dependencies tasks

Often, you need to run a task when another task is completed. With this example, I introduce [gulp-util].(https://github.com/gulpjs/gulp-util). Install it with this command: npm install --save-dev gulp-util. gutil is the official toolbelt of Gulp, which provides some utilities.

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('isReady', ['build'], function() {
	gutil.log('The build is complete');
});

Note: gutil.log will output your message formated in the Gulp way to your console / terminal.

The default task

There is one last thing you have to know, and maybe the most important one. What happens when you execute this command? gulp. Basically Gulp will look for the ‘default’ task and try to run it. So if you don’t specify that task the process will stop.

Here is our final gulpfile.js

// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var del = require('del');

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

gulp.task('sass', function() {
  return gulp.src('./src/styles/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('clean', function() {
    del(['./dist/css/*',
        './dist/styles/*'
    ]);
});

gulp.task('groupTask', ['sass', 'minify-js']);

gulp.task('build', ['clean']);


gulp.task('default', ['build']);

Conclusion

Gulp is an excellent task runner which is “code over configuration”. This covers very specific needs.

For further reading, start with official recipes from Gulp.

The gulpfile.js we have built together in this introduction is very simple. But there is a lot of configuration you can manage with Gulp! There is a plugin for everything. If you wish, you can also create your own one. Do you want Gulp to manage the Browserify compilation? Checkout this recipe. Are you using Less instead of Sass? Take a look to gulp-less.

Responsive e-mails: tips and tricks

Creating a responsive e-mail may give you strong headaches. There are so many things to deal with!It is even more frustrating and time-c...… Continue reading

History of web fonts

Published on April 03, 2017

Firsts steps in SAML 2.0

Published on November 11, 2016