Gulp vs. Grunt
Node.js Automation
Tools Showdown

Gulp.js is a new Node based task runner. Get the pros and cons of Gulp, along with its older counterpart, Grunt.



Gulp.js is a new Node based automated task runner that has been causing lots of buzz. Although automation and task runners are not a new idea they have become very popular in the front-end community after the introduction of Grunt.js. Grunt was built by Ben Alman to help simplify the process of automating repetitive tasks. In this respect Gulp and Grunt both allow developers to speed up their workflow and optimize site performance. Some of the tasks include compiling sass, linting css, concatenating files, minifying files, auto-generating image sprites and compressing images.

There are a couple of things that sets Gulp apart from Grunt. The first is speed. Gulp uses node streams to group tasks together and process them sequentially in memory. To run four tasks on a group of files in Gulp requires only one write to the disk. With Grunt you would need to configure an input and output for each task resulting in four separate writes. The speed difference is not noticeable with smaller projects but can become a issue the more files and tasks that need to be processed. Another difference between the two is Gulp’s focuses on code over configuration. Grunt’s tasks are configured in a configuration object inside the gruntfile while Gulp’s are coded using a Node style syntax. As a developer, I would much rather code than configure. The configuration style for each Grunt plugin can vary depending on the plugin author. With Gulp configuration options are much more standard.

There are a couple areas where Gulp falls behind Grunt. It is a young project with a smaller following and not as well documented. At the moment Gulp only has 779 plugins while Grunt’s repo contains 3,638. There is a Gulp plugin that can run any Grunt plugin but it still feels like a limitation to me. Another area where Gulp needs work is its error messages. While debugging issues I found the error messages to be unhelpful.

Setup of same two tasks

gulpfile.js

var gulp = require('gulp');
	 sass = require('gulp-sass');
	 autoprefixer = require('gulp-autoprefixer');

// Styles
gulp.task('styles', function() {
	gulp.src('sass/styles.scss')
		.pipe(sass())
		.pipe(autoprefixer('last 1 version', '> 1%', 'ie 8', 'ie 7'))
		.pipe(gulp.dest('css'));
});

// Watch the sass files
gulp.task('watch', function() {
	gulp.watch('sass/*.scss', ['styles']);
});

gulp.task('default', ['styles, watch']);

gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'sass/styles.scss': 'css/styles.css'
        }
      }
    },

    autoprefixer: {
      single_file: {
        options: {
          browsers: ['last 2 version', 'ie 8', 'ie 9']
        },
        src: 'css/styles.css',
        dest: 'css/styles.css'
      },
    },

    watch: {
      sass: {
        files: 'sass/*.scss',
        tasks: ['sass', 'autoprefixer'],
      }
    },
  });

  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

Gulp vs. Grunt Summary

gulp-2x

Gulp

  • Faster because of streams
  • 779 plugins
  • Code over configure
  • Shorter Files
grunt

Grunt

  • Huge community
  • 3,638 plugins
  • Been around longer
  • Used in big production sites

Should I switch?

Although I am a big fan of Gulp.js and use it in my own projects, I don’t think everyone should make the switch. Grunt is still a great tool and currently has more plugins. I would recommend Gulp to newcomers with small projects or for people who despise configuring JSON files. If Grunt powers most of your projects why change a good thing? The next version of Grunt will also be bringing in streams which may level the playing field in terms of speed. Hopefully the competition will make both projects even better. It will be interesting see how the Gulp vs Grunt debate evolves given the fast pace of the javascript ecosystem.

Categories: /