Gulp and Grunt. Ah! The Two Task Runners

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, both Gulp and Grunt 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 an issue with 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 standardized.

There are a couple of areas where Gulp falls behind Grunt. It is a young project with a smaller following and not as well documented. As of November 2015, Gulp only has 1,916 plugins while Grunt’s repo contains over 5,000. 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

Faster because of streams
1,916 plugins
Code over configure
Shorter files

Grunt

Huge community
5,328 plugins
Been around longer
Used in big production sites