Front-End Insights

Let’s get started with Gulp!

Dev-StackProgramming

Last time I wrote a post where I did a comparision of two task runners: Grunt and Gulp. The conclusion of that post was it is better to use Gulp. So today I will jump start into this tool and show you how to configure and use it in everyday work…

Let’s get started with Gulp and install it!

Thanks to nodejs and its package manager – npm, installation of everything in the front-end world is pretty straightforward. All we have to do is to run the below command in the command line (it might be necessary to invoke it with sudo if you are in Linux or Mac OSX):

sudo npm install -g gulp

The command above installs Gulp globally but if you now try to run the gulp command you will encounter an error which says that the local Gulp is not found… However, you still need to do this first step before moving on to the next one. Now, let’s move to the project directory and once again install Gulp but this time in our project dev dependencies (sudo is not needed this time):

npm install --save-dev gulp

Great! This time when you, once again, try to run the gulp command you will be informed that there is no gulpfile found. This means that we are really close – let’s create a gulpfile.js file in the root folder of our project and add some code to it:

var gulp = require('gulp');

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

If you have read my previous post, the above code may look familiar to you. That’s right – the gulpfile.js is a configuration file where we can tell Gulp everything about our tasks.

Configuration of the Gulp task

Both Grunt and Gulp are based on plugins so if we want to create any task in Gulp we have to install a suitable plugin first. Let’s say we want to configure a transformation of LESS files to CSS. To do that we have to install the gulp-less plugin (I will do that only for my project but global installation is also possible):

npm install --save-dev gulp-less

Now we can make some changes to our gulpfile.js file (basically I am using a sample from gulp-less plugin documentation):

var
  gulp = require('gulp'),
  less = require('gulp-less'),
  path = require('path');

gulp.task('less', function () {
  return gulp.src('./layout/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

As you can see, at the beginning we require some plugins, including our gulp-less (two others do not require any additional installations). Then, in line six, we start our task by calling task function. The function takes on two parameters: the name of the task and the callback which handles the task. In line number seven we give Gulp the source path of our LESS files (we can use wildcard chars) – in our case they are located in the layout folder; we tell Gulp that we want to look inside this folder and inside any of its subfolders (**); we also inform it that we are interested in files with less extension (*.less).

Next, in line eight, we do the transformation – I don’t think this is a good place to explain how it works in detail – please see the documentation of this plugin if you want to dig deeper.

At the end, in line eleven, we tell Gulp where to put the result of the transformation. You might notice that we have a chain of calls here. Yes, this is the main advantage of Gulp – we can just tell the task manager what the steps of our task are in a “fluent” manner.

Ok, we have the task configured. It’s time to run it! To do so, just invoke the gulp command giving the name of the task as a parameter:

gulp less

As a result you should see the new public folder in the root folder of the project. This new folder contains the css folder with transformed CSS files inside – awesome!

File watchers on board!

Our current result is impressive but that’s not all! At this point we have to run the gulp command everytime we make a change in the LESS file… It would be nice to have this done automatically, wouldn’t it? Please welcome file watchers on the scene and see below how our gulpfile.js has changed after file watchers are introduced:

var
  gulp = require('gulp'),
  less = require('gulp-less'),
  path = require('path');

gulp.task('less', function () {
  return gulp.src('./layout/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch('./layout/**/*.less', ['less']);
});

The interesting part starts at the line fifteen. As you can see, we have here the task watch. In its callback we invoke a watch function with two parameters. The first parameter is a source path of the files to watch (in the example it’s the same as the source path of our less files because we want to monitor if these files are changing). The second parameter is an array of tasks to run when the watch is triggered (we want to trigger only the less task).

Now, when you run the watch task…

gulp watch

…the task will run and not stop. It will wait instead for changes in the LESS files and invoke the less task everytime it changes! If you want to stop it, just type ctrl + c.

Summary

I think I have shown you all the important basics of Gulp. As I mentioned in the previous post, we can pick from almost 2000 plugins which, I think, will cover all our needs. I encourage you to check it out if you haven’t yet! With tools like that we can always be more productive and it’s awesome!