Grunt vs Gulp.js: A Comparison

Build automation is a big deal within a digital agency. Having a large amount of developers with different setups can cause a lot of issues. Build automaton helps unify the developer process in a multi-developer environment, whilst also helping developers focus on developing websites rather than performing repetitive tasks repeatedly like minifying stylesheets, compressing images, code linting and unit testing.

Each developer will complete a specific task or development process in a certain way, which can cause various issues in a multi-developer environment. Each developer having their own build process can cause multiple problems when several developers work on the same project, resulting in dependent software on each machine and sometimes the duplication of tasks. Build automation solves this problem by giving each developer the same build process and the same built result at the end.

Grunt vs Gulp

Grunt and Gulp.js are JavaScript Task Runners. Grunt is the more well known of the two and has been around the longest. Here at Parallax, we use it as our standard.

Gulp.js however, is the new kid on the block. Let’s compare the two:

Grunt is focused around configuring of the task and plugin using a JavaScript object. Gulp.js, on the other hand, uses an intuitive streaming syntax similar to how Node.JS works and JavaScript Promises. It focuses on piping the result of one task into the next until you reach the point where you’ve completed all of your tasks on that particular file.

For details on how to install, try these guides:

Gulp

Grunt

Each task runner has its own configuration file for Grunt, which is called a ‘Gruntfile’ and can either be coded in Javascript (Gruntfile.js) or CoffeeScript (Gruntfile.coffee). The Grunt CLI tool will detect either of these files and follow the configuration provided. Gulp.js uses a similar Gulpfile also coded in Javascript (gulpfile.js).

As mentioned before, Grunt is focused around the configuration of tasks using JavaScript objects. Here is an example configuration for CSS Minification using Grunt and the grunt-contrib-cssmin plugin.

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        cssmin: {
            combine: {
                files: {
                    'style.min.css': ['style.css']
                }
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default task(s).
    grunt.registerTask('default', ['cssmin']);
};

This is just a very basic example of the Grunt configuration you can add to various tasks and jobs. Using the example above, we’ve configured a cssmin task called ‘combine’ to take style.css and minify the contents into a style.min.css file.

This takes the following file:

body {
    width: 100px;
    margin: 10px;
}

Converting it to the format below. It’ll remove anything unnecessary and leave you with a very basic file without whitespace, comments and anything else not required for deployment.

body{width:100px;margin:10px}

Now lets look at the Gulp.js equivalent. First we’ll start by creating our Gulpfile.js.

var gulp = require('gulp'),
    minify = require('gulp-minify-css');

gulp.task('styles', function() {
    return gulp.src('./style.css')
        .pipe(minify())
        .pipe(gulp.dest('./dist/'));
});

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

As you can see straight away, the number of lines required to setup the same minification task in Gulp.js is nearly half compared to Grunt. Gulp’s syntax is very different to Grunt as it takes advantage of Node.js streaming syntax to pass results from one function to the next. This makes it very intuitive and allows you to easily build a workflow that is easy to understand for developers compared to Grunt’s configuration based workflow.

Gulp.js features five main functions and several additional features for more advanced use. Everything else is added by using plugins and your own JavaScript code.

gulp.task(name[, deps], cb);

This registers a task and adds the function callback to the task. When the task is run, the callback is executed. There is also an optional dependency parameter which tasks an array of dependent tasks that must be executed in advance.

gulp.src(globs[, options])

The src function is used to grab the contents of a file for piping into plugins. There is also an options array that can be passed.

gulp.dest(path)

This function can be piped into and it will write files to a given folder. It can also be used to re-emit all data so that you can pipe the data into multiple folders.

gulp.run(tasks…[,cb])

The run function calls the given tasks that have been predefined using gulp.task. The ellipsis represents a variadic argument allowing multiple tasks to be entered repeatedly, e.g. gulp.run(‘styles’, ‘scripts’);. You can also provide it with an optional callback function that will be executed after the tasks have been completed.

gulp.watch(glob [,opts], cb)

This is the final function which will allow you to tell Gulp.js to watch a specific file or an array of files. This function can also accept a glob and when a change occurs to the matched file the given callback will be executed.

For more details on these API calls checkout the Gulp API documentation.

Grunt has become the go-to Javascript Task Runner for many, however Gulp.js is a great alternative. Gulp.js would benefit from more plugins as it is still very new, and could then challenge Grunt especially due to its simpler interface.

What are your thoughts? Let me know in the comments or Tweet us.