Introducing Gulp.js

If you use a task runner in your workflow you’ll know why they are so useful in coding; they improve our workflow and allow us to focus on problem solving rather than repetitive data entry.

Gulp is one such application and it has a lot of benefits to it. There’s a really simple syntax, no messy JavaScript files, a simple API and a wide variety of plugins.

Installing Gulp

As you’ll suspect if you’ve used a utility like this before, you need to have NodeJS and npm installed on your system, once you have all you need to install Gulp is:

npm install -g gulp

That line is all it takes to install Gulp globally on your machine.

Using Gulp

The first step we need to take in order to use Gulp is to install the gulp utilities and gulp inside your projects directory like so:

npm install —save-dev gulp gulp-util

This will install all of gulp’s utilities but it won’t install any plugins you may want to help you achieve certain tasks in your project like minifying JavaScript, concatenating files or converting your sass files.

The plugins directory of gulp is here and you can search for what you need.

If for instance I want to install a sass plugin in my project I just need to run:

npm install —save-dev gulp-sass

Just like that the sass plugin is ready to use and since i used -save-dev in my code all the dependencies and plugins I install will be stored inside my package.json file in the root of my project.

Having all your dependencies on your json file ensures that all these can be easily installed using npm if someone inherits your project.

If you know Grunt you’re are familiar with their grunt file and in the case of Gulp we also have to create a similar file in the root of the project and inside it add the plugins we need in our project in straight forward JavaScript:

var gulp    = require(’gulp’),
`  gutil    = require('gulp-util),
`  sass     = require(‘gulp-sass’);

As you can see the code for defining this is very simple , you just create variables for the plugins you will be using and require those plugins after requiring gulp and its utilities. This kind of straight forward JavaScript can help your coding more than you think.

Now we that we have the sass plugin up and running we need to assign a task to it and to define this task we need to call the task Gulp method:

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

As you can see from the code there is nothing overly long and complicated, this file will be simple JavaScript.

We start by calling the task, giving it a name and passing a function to it. In this function we start by calling the src() method:

gulp.src(‘./scss/*.scss’)

And in here I defined where Gulp should fetch the sass files that are giong to be converted and I am telling it to search any file with a .scss extension inside the scss folder I have in my project.

After that we ran:

.pipe(sass())

This line gets the files Gulp found in previous lines and passes them to the plugin of our choice, in this case I am passing those files to the sass plugin so that they can be converted.

.pipe(gulp.dest(‘./css’));

As we know in this process the final task is to save the converted files into a folder and that is exactly what this line does , it gets the converted files and places them to the css folder.

The last thing after writing all our tasks is to create a default task in the bottom of our file that will run when we run gulp in the command line:

gulp.task('default', function(){
    gulp.run(’sass'); 
});

Now if you try to go to your command line and write gulp you will see that your .scss files are indeed converted and moved to a new folder but we have to type in gulp every time we want this to happen.

As we know most utilities usually have a watch function in their core that allow them to perform tasks without them being called, they notice the change in files and perform the tasks in hand. Gulp is no exemption, if your want to use the watch function in a certain folder you run:

gulp.watch(‘./scss/*’, function () {
     gulp.run(’sass’);
});

By adding this function we ensure that Gulp watches that folder and re-runs the sass task on every file change making your workflow completely automated.

Conclusion

JavaScript task runners have become a part of the development workflow for many developers, a lot of us saw the power in having a tool that performs the tedious tasks for us by just adding a little configuration.

Given that tools already exist to manage this, you might be reluctant to shift to Gulp, but if you look at the simplicity of the syntax, you’ll see the obvious benefit of taking the time to work it into your workflow.