Nobody likes boring and repetitive tasks, and when it comes to web development and tools to automate your tasks there are two major players: Grunt and Gulp. But which one should you go on with? What are the differences between them? Which one is better?

I'm going to show you the main differences between them so I can help you choose the right tool for you.

Similarities

Grunt and Gulp are a JavaScript task runners that help you with repetitive task like minification, compilation, unit testing, linting, etc.. This way you waste less time with this boring tasks and focus on what matters the most: your apps.

At a first glance, they both seem quite similar, since the end result is the same. They're JavaScript task runners, they both use Node, and require you to create tasks and install plugins to perform those tasks.

But the way they're configured and the way they run is actually different.

Differences

Dispite the similarities, there's basically two main differences between Grunt and Gulp:

  • The way you configure your tasks. Grunt is configuration-based, while Gulp is stream-based.
  • The way they run your tasks. Grunt runs the tasks is a sequential manner, while Gulp runs them with maximum concurrency.

Tasks configuration

Let's make a simple comparison between Grunt and Gulp on how to configure tasks to minify, concatenate and copy some CSS files from the "src" to the "dist" folder.

Grunt
grunt.initConfig({
  concat: {
    css: {
      src: 'src/css/*.css',
      dest: 'tmp/css/concat.css'
    }
  },
  cssmin: {
    css:{
      src: 'tmp/css/concat.css',
      dest: 'dist/css/concat.min.css'
    }
  }
});

grunt.registerTask('default', ['concat', 'cssmin']);
Gulp
gulp.task('css', function() {
  gulp.src('src/css/*.css')
    .pipe(cssmin())
    .pipe(concat('concat.min.css'))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', ['clean', 'css'], function () {});

Most of the tasks done with Gulp result in a much shorter and cleaner file.

The great thing about Gulp is the stream-based build system, you just create your tasks by piping all your needed plugins to perform the task, one after another.

"The magic happens because of the object format that plugins exchange, the so called Vinyl. Vinyl is just an abstraction that describes a virtual file object — one that could refer to an existing file on the FS, a stream, or simply dead-ends with a null." - Preslav Rachev

You may think I'm biased (maybe a little), but in fact I use both Grunt and Gulp. I choose one over another depending on the type of project.

Speed

Apart from that you can see that with Grunt we needed to use a "tmp" folder, to store the processed files in between the tasks. That's because each task accesses the files separately - open the files, apply the changes, and close the files. Almost every task requires a source and destination folder for the processed files, which makes Grunt slower than Gulp when performing the tasks.

Gulp, on the other hand, since is has a stream-based build system, doesn't need this intermediary step - what comes out of a function goes into the next one, saving a lot of time with IO. And since Gulp uses Orchestrator, making the tasks run with maximum concurrency, it finishes the tasks a lot faster.

You can easily test the difference between each tool since they both show on the terminal the time spent on each task, or check this blog post where Zander Martineau made some speed comparisons tests.

Stats

Gulp appeared in mid 2013 but only got noticed in the begining of 2014, and since then the number of adopters started ramping up. Grunt started in late 2011 and took about a year to get noticed, but since it was the first to arrive it has, still today, the largest user base.

Grunt has more than 4400 plugins at the moment. I couldn't find the number of plugins available for Gulp since their site wasn't working at the time I wrote this article, but if you go to Node Package Manager site and search for Grunt you will get over 12000 result, and almost 5500 for Gulp. That's expected giving the time each one has been around.

Despite Gulp beeing around less time than Grunt, it's catching up. Here's some stats* from npm:

Grunt:
  • 18,819 downloads in the last day
  • 295,079 downloads in the last week
  • 1,219,987 downloads in the last month
Gulp:
  • 13,798 downloads in the last day
  • 218,497 downloads in the last week
  • 869,457 downloads in the last month

*20th April 2015

Although Grunt is still up ahead, Gulp continues to grow at a much faster pace. Here's some charts from npm-stats:

Grunt:

Grunt download stats

Gulp:

Gulp download stats

The number of commits per week is also higher on Gulp than Grunt, but that is also understandable since the latter is a much more mature tool, AND there's a new version (1.0) on the way.

Grunt

Grunt commit stats

Gulp

Gulp commit stats

Conclusion

So, should you go with Grunt or Gulp? Honestly, that's up to you. No one is better than the other, they're just the same type of tool to do the same type of job. The main difference is in the way you setup your tasks.

I use Grunt for my AngularJS projects, mainly because of the angular Yeoman generator that scaffolds my app just the way I like. There's also a Gulp version for AngularJS but I didn't like it, so I keep using Grunt and make some small tweaks on the task configurations if needed.

I mainly use Gulp for my Laravel projects and some other small websites, where I already have some tasks of my own. Basically, if I can't find a Yeoman generator that suits me, I'll make it from scratch using Gulp, that, in my opinion, it's much simpler to use and configure.

Also, I think it is worth pointing out, that there's a new version of Grunt on the way that uses Orchestrator, meaning that it will make it a lot faster that the current version!