GulpJS

GulpJS Setup and Configuration

Click Here for TL;DR

GulpJS is a Task/Build Runner. For more information on GulpJS you can visit there website. GulpJS is different from other solutions out there (i.e. Grunt) for several reasons. I’m going to touch on some of those reasons and show some example gulpjs files below:

Streaming Through Pipes

Gulp uses node streams. In a quick way, what this means and the benefit to us is that we can pass data straight from one task to another. This is one way in which GulpJS differs from another task runner like Grunt.

Lets say, for example, you want to concat and then minify some javascript files. To do this with grunt you needs to concat all your files into a new file (lets say contact.js) and then minify that file to a new file (lets say minify.js). When this process is done you have a leftover file that was written to disk (concat.js) that you must now go and delete.

With GulpJS you can pipe the concatenated file directly to your minification task and don’t need to worry about cleanup when the task is done. This means you are only writting to disk once as opposed to many times with a system like Grunt.

Code Over Configuration

With GulpJS you have access to plugins and APIs which allow you to write JavaScript code to dictate your tasks and build. With something like Grunt you are writing configuration files which are then used to dictate how their build tasks are executed. This is illustrated further in the examples below.

Installing GulpJS

Install Gulp is simple. Running the following command will install Gulp globally and save it as a development dependencies in your package.json file.

1
    npm install gulp -g --save-dev

That’s it! Now you’re ready to start using Gulp.

Example Build Process with GulpJS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//creating variables that will be used by gulp
var gulp    = require('gulp'),
    uglify  = require('gulp-uglify'),
    notify  = require('gulp-notify'),
    jshint  = require('gulp-jshint'),
    rename  = require('gulp-rename'),
    concat  = require('gulp-concat'),
    less = require('gulp-less'),
    //the paths object houses the paths to all the files that I will need throughout my build process
    paths = {
        js : ['app/src/*.js', 'app/src/**/*.js',  'app/src/**/**/*.js'],
        less : ['app/less/*.less'],
        html : ['app/src/*.html', 'app/src/**/*.html', 'app/src/**/**/*.html']
    };

//creating a gulp task called 'js'
gulp.task('js', function () {
    //declaring the src files that will be used for this task
    return gulp.src(paths.js)
        //running jshint for JavaScript validation on these files
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        //concatenating all js files into a file called 'module.js'
        .pipe(concat('modules.js'))
        //declaring the destination for this new file
        .pipe(gulp.dest('min/modules'))
        //renaming this file
        .pipe(rename({extname: '.min.js'}))
        //uglifying this file
        .pipe(uglify())
        //declaring a destination for this new uglified file
        .pipe(gulp.dest('app/build'))
        //spitting out a system notification that my task is done
        .pipe(notify({ message: 'Finished JavaScript Gulp Tasks'}));
});

//creating a task that moves my html files into my build folder
gulp.task('html', function() {
   //declaring the src files that will be used for this task
   return gulp.src(paths.html)
       //declaring the destination for these files
       .pipe(gulp.dest('app/build'))
       //spitting out a system notification that my task is done
       .pipe(notify({ message: 'Finished HTML Gulp Tasks'}));
});

//creating a task that compiles my LESS files into a single CSS file
gulp.task('less', function () {
   //declaring the src files that will be used for this task
   return  gulp.src(paths.less)
        //concatenating all LESS files into one file called 'master.less'
        .pipe(concat('master.less'))
        //compiling my LESS code into CSS
        .pipe(less('master.less'))
        //declaring the destination for my new CSS file
        .pipe(gulp.dest('app/build/css'))
        //spitting out a system notification that my task is done
        .pipe(notify({ message: 'Finished LESS Gulp Tasks, Triggering Live Reload'}));

});


//creating a task that will watch for file changes and then run a task
gulp.task('watch', function(){
   //when I see any file in 'path.js' change I will run the 'js' task
    gulp.watch(paths.js, ['js']);
   //when I see any file in 'path.html' change I will run the 'html' task
    gulp.watch(paths.html, ['html']);
   //when I see any file in 'path.less' change I will run the 'less' task
    gulp.watch(paths.less, ['less']);
});

//by titling this task 'default' it is the task that will run when I run the 'gulp' command.
//this default task will run the 'js' task, the 'html' task, the 'less' task, and then finally the 'watch' task
gulp.task('default', ['js', 'html', 'less', 'watch']);

Some notes about the above code. You will notice I set several variables equal to require('pluginname');. Gulp is aware of these plugins because I have installed them. Here is an example of installing jshint.

1
    npm install gulp-jshint

You can find a list of many GulpJS plugins here

When running Gulp I can just run the gulp command which will target the ‘default’ task or I can specify a command, here is a few examples:

1
2
3
4
5
    gulp

    gulp watch

    gulp js

I hope this was helpful!

In The End

GulpJS is an efficient Task/Build Runner that takes advantage of node’s streams to be fast and effficient. GulpJS allows you to write JavaScript code to create your build process rather than creating configuration files.

Install GulpJS:

1
    npm install gulp -g --save-dev

Set up a gulpgile.js

Click here to see an example gulpfile.js

Run Gulp:

1
    gulp

Click here for GulpJS’s website.

Pro Tip: Switching from Grunt to Gulp

Switching from Grunt to Gulp is very easy to do, so don’t hesitate to do it if Gulp will work better for your project. There are even plugins out there that help take your Grunt config file and use them with GulpJS and vice versa!

Using Grunt in Gulp

Using Gulp in Grunt

Leave a Reply

Your email address will not be published. Required fields are marked *