Getting started with Gulp.js

Automate and improve your JavaScript workflow with Gulp!


What is Gulp?

Gulp is what we call a ‘Task runner’. Basically it will automate mundane repetitive processes in your workflow. Such as compiling multiple files into one, or minifying your javascript.

Why use Gulp?

There are other packages that are similar to Gulp, such as Grunt, Webpack, Slush, and Yeoman. You’ll have to do your own research to decide what is best for your project, but if you have never used a Task runner before, you should, and Gulp is a great place to start.

There are lots of things that you can do with Gulp but here’s a real scenario from me: I recently created a JavaScript that allows users to easily create popups. It’s good, but I found a few things that could be improved. Then I found a few more. Each time I was making a change, I was manually updating the version number then copying all the code into the minified file and then minifying it using my text editor. Then I wanted to provide some example css to help people get started. I usually work with SASS so that’s what I wrote it in. Realising that not everyone wants to use SASS I then had to get the compiled css and put that in the correct directory.

This was taking ages every time I made one small change. After setting up Gulp I never had to do this again.

This is just a small use case which I think is easy to understand and applicable to many people that might want to start using Gulp but there are a great many other uses, we can cover those in another article.

Getting started

Navigate to a your projects root folder in the terminal then run the following commands:

  npm install gulp-cli -g
  npm install gulp -D
  touch gulpfile.js

This will:

  • Install the Gulp client globally
  • Install Gulp to the devDependencies for this project
  • Create a gulpfile.js (Used for configuring gulp.).

Then add the following to your gulpfile.js

'use strict';
var gulp = require('gulp');

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

Now you have everything setup! If you run gulp in the terminal in will run the default task, i.e the task we just created in the gulpfile. But nothing will happen because we haven’t actually told gulp what to do…

Gulp has a fantastic list of recipes. You may find exactly what you are already looking for in there!

I am going to use one of the recipes called ‘Output both a minified and non-minified version’

'use strict';

// require the necessary gulp modules
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

// Define the location of our build directory
var destination = 'build/';

gulp.task('default', function() {
  return gulp.src('foo.js')
    // This will output the non-minified version
    .pipe(gulp.dest(destination))
    // This will minify and rename to foo.min.js
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(destination));
});