Front-End Insights

Grunt or Gulp? Which one to choose and why Gulp?


Today I will continue the subject which I started in the post about modern front-end development stack. I wrote there about task runners which can help us in the automation of various kinds of development jobs. As you perhaps rememeber, we are faced with the choice between two task runners: Grunt or Gulp. Let’s see where the main differences among them lie. Maybe then we will be able to decide which one is better? (I think everyone knows it’s Gulp…:-P)


One of the most important advantages of using Gulp is its speed and performance. This is because of the way that it does the task: Grunt uses temp files which means that if the job needs to be done in more than one step, the results of these steps are written as temporary files to the disc (as we all know, disk I/O operations are not so fast…). On the other hand we have Gulp. Instead of writing temporary files, it uses nodejs’s pipes… To cut the story short, it means that the results of all steps of the task are stored in the memory which vastly increases the speed and performance.

Of course, in small projects this difference might not matter… However, all huge projects were small at the beggining, so I think it’s better to make a good choice early on instead of changing the task manager later.

Grunt vs Gulp – 0:1


The second big difference between Grunt and Gulp is how you can configure them. I think it’s best to explain this with examples. Please see below an example of the Grunt configuration:

module.exports = function(grunt) {
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                files: {
                    'css/main.css': 'less/main.less';
        uglify: {
            options: {
                mangle: false
            my_target: {
                files: {
                    'dest/output.min.js': ['src/input.js']

    grunt.registerTask('default', ['less', 'uglify']);

As you can see, we have two tasks here: less and uglify. Each of them has a separate configuration object which is completely independent from any other. In the last line we register all our tasks and they will be executed in the order specified.

As a comparison, let’s see the example of the Gulp configuration:

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

gulp.task('less', function () {
    return gulp.src('./less/**/*.less')
            paths: [ path.join(__dirname, 'less', 'includes') ]

gulp.task('compress', function() {
    return gulp.src('lib/*.js')

W can see here that in Gulp we don’t have, in fact, any configuration. Instead we can build tasks using a chain of pipes: for example, in the less task we start by specifying a source, then we use a gulp-less plugin to do the job and at the end we redirect the result to the destination file. The same is done in the compress task.

For me, the second approach is much more clean, compact and “fluent”.

Grunt vs Gulp – 0:2


I think we can measure and compare the communitie’s size of each task runner by counting the number of plugins available for them. Well, in this competition Grunt wins with 5322 plugins (on 22 November 2015) against 1956 plugins for Gulp. In fact, we should expect that because Grunt has been on the market much longer than Gulp. However, almost 2000 plugins is not that bad a result so I think we can say that they are both mature solutions.

Grunt vs Gulp – 1:2


Both Grunt and Gulp are sophisticated solutions and do their job very well. The difference in the way we can configure them is not that important but if we need a really efficient solution the choice is, in my opinion, simple: Gulp.