Gulp v.s. Grunt: A Duel Without a Winner

Gulp and Grunt are tools that focus on delivering the same solution. Their main aim is to facilitate easier app building (i.e. automating build system tasks). But what sets them apart? And what about performance? You might be surprised to find yourself favoring Gulp. 

Similar Tools with a Common Ground

Gulp and Grunt are both popular JavaScript task runners and have a lot of similarities.

Here are some things they have in common:

• They are both written in JavaScript and require NodeJS to run.
• Both operate from the command line.
• There is an active community around both tools (e.g. eg.  one man army: Sindre Sorhus).
• They both offer solutions to the same web development problem.
• Both are open-source projects under the MIT License.

A Quick Look at Grunt

You’re probably familiar with (or at least heard of) Grunt. It’s been around since 2012 and was created by Ben Alman. Grunt prefers writing configuration before you write any code, and any proper JavaScript can usually only be found in plugins.

Here’s a quick peek at what a gruntfile.js file looks like:

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
    something: {
     files: {
       'dest/output.min.js': ['src/input1.js', 'src/input2.js']
     }
    }
   }
  });
  // Load the external module
  grunt.loadNpmTasks('grunt-contrib-uglify'
  // Add role
 grunt.registerTask('stable-build', ['...', '...']);
};

I used Javascript in the example above, but it’s also possible write the configuration file in CoffeeScript, which makes things considerably clearer.

How to Install Grunt 

You can use npm package management modules to install Grunt. npm install -g grunt-cli  from the command line installs Grunt’s command line globally, which can then be run as a local copy.  You can start it from the home directory using: npm install grunt --save-dev.

The Drawbacks of Grunt 

• Configuration instead of writing JavaScript.
• A large number of configuration parameters for individual plugins.
• Chatting code – Grunt configuration files are usually longer.
• Slower processing of larger numbers of files (frequent I/O operations slows it down).
• Competing processing tasks are more difficult to solve  or require plugins. 

A Quick Look at Gulp

Gulp came on the scene in mid-2013 from the team over at Fractal and was created by Eric Schoffstall. Its aim is to simplify and speed up build processing using NodeJS streams. Data is transmitted between tasks using the pipeline method, which reduces the number of I/O disk operations so that tasks can be easily chained. 

A brief example of what a Gulpfile.js might look like:

var gulp =  require ( 'gulp' )
var uglify =  require ( 'gulp-uglify' );
gulp . task ( 'compress' ,  function ()  {
  gulp . src ([ 'lib / *. js' ])
    . pipe ( uglify ())
    . pipe ( gulp . dest ( 'dist' ))
});
gulp . task ( 'default' ,  function ()  {
  gulp . run ( 'compress' );
});

This should give you a basic idea of what Gulp is all about: short, clear code takes priority over configuration.

How to Install Gulp 

Gulp can be installed from your home directory using the command:  npm install gulp –save-dev.

The Drawbacks of Gulp

• Streams. If you’ve never used NodeJS before you can easily get lost in them.
• The complex procedure for solving the linear dependency of individual tasks.
• Minimal configuration options for plugins.

Let’s Compare!

To introduce you to Gulp and Grunt, I’ve prepared a simple table of selected parameters for comparison:

Parameter	Gulp	Grunt
Logo
Website	http://gulpjs.com/	http://gruntjs.com/
Created	2013	2012
Number of Plugins	737	3,416
Downloads Per Month	230,397	700,301
Number of Contributors	86	48
Parallel Tasks	yes	code ,  plugin ,  Pint
Sequential Task Chaining	code ,  plugin ,  plugin	yes
License	MIT	MIT

For awhile, I wondered how I could effectively compare these two tools for you. In the end, I chose some simple examples that could be implemented in both tools.

The source code of these tests can be found here:  https://github.com/zdrojak/gulpvsgrunt

While testing, I was only interested in the total running time. Each job was run ten times in order to make any differences stand out.

CoffeeScript Test

Compiled 156 coffee files with the result of a single minified JavaScript file:

Coffeescript  Gulp :  14.613068 seconds
Coffeescript  Gulp multiple task :  53.036898 seconds
Coffeescript  Grunt :  69.4299 seconds

JavaScript Test

Compiled a small number of JavaScript files and minified results:

Javascript  Gulp :  13.327634 seconds
Javascript  Grunt :  12.729964 seconds

Less Test

Compiled into a Less file:

Less  Gulp :  13.058889 seconds
Less  Grunt :  13.059217 seconds

My test results were rather inconclusive, and moreover, could possibly be affected by plugin quality. Both Gulp and Grunt have their own strengths and weaknesses.

If I were to make a general statement, it would be that Gulp has a slight lead when it comes to processing a large number of files.

However, the new version of Grunt (0.5x) should lead to stronger acceleration, and they’re also playing with the possibility of passing data between tasks through the pipeline.

In Conclusion

My advice would be to ignore anyone trying to persuade you that one tool is better than the other, or that you’ll be completely “out” if you don’t immediately switch over.

In my opinion, this is purely a subjective matter of preference that will be different for every developer. Select the philosophy that suits you (Broccoli , Mimosa , Brunch , Cake , Jake or shell ) and don’t do anything manually or more than once, especially since it relates to building applications.

How to Switch to Gulp

The plugin gulp-grunt is a great plugin for running Grunt jobs using Gulp. All done! Just kidding.

If you’re serious about switching over to Grunt, it will require a complete rewrite. So, before you rewrite a single line of code, here are a few things to consider about what you’ll get in return for the time you will have to invest:

• You build script code will be shorter and clearer.
• Gulp is simple to learn – new developers could train themselves in about 20 minutes.
• You get a simple and transparent API with minimal methods.
• A readable JavaScript configuration space.
• Parallel processing of tasks at the base.

Other resources that you might find interesting:

• Speedtesting Gulp and Grunt
• Grunt vs Gulp – Beyond the Numbers
• And just like that Grunt and RequireJS are out, it’s all about Gulp and Browserify now
• Grunt Gulp And Tasks For Performance Optimization
• Introducing Pint, the new build system for Grunt.js
• Gulp by example
• Stream Handbook
• Handling Tasks Sync with Gulp JS

This article was originally published in Czech on Zdrojak by Testomato developer Roman Ožana. Be sure to check out his blog nabito.net for more It has been translated and posted here with his permission.