Grunt vs Gulp

First, a short intro. Both Gulp and Grunt offer the same service to us developers. They act as build systems for javascript projects but can both be used in a much wider range.

An example of the rule of a build system in an AngularJS project might be:
1. Compile SASS files into CSS
2. Combine multiple JS files into one, minify and compress.

Grunt has been the leader in the AngularJS space from the beginning but we are now seeing a steady rise in the use of Gulp (and have already switched all our projects to it).

Both Gulp and Grunt use the idea of tasks and task dependencies,
the main difference in Gulp is the idea of piping the flow, for example:

| Take all the JS files in a project, minify it and copy it to the build folder

var gulp = require('gulp');  
var concat = require('gulp-concat');

gulp.task('build', function() {  
  return gulp.src('app/js/**/*.js')
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'))
});

To run the example:

npm install --save gulp  
npm install --save gulp-concat  
npm install --save gulp-uglify

gulp build  

Now if we want to also uglify the code, all we need to do is to pipe our files throught an uglifier:

| Uglify with .pipe(uglify())

var gulp = require('gulp');  
var concat = require('gulp-concat');  
var uglify = require('gulp-uglify');

gulp.task('build', function() {  
  return gulp.src('app/js/**/*.js')
    .pipe(concat('app.js'))
    .pipe(uglify()) 
    .pipe(gulp.dest('build'))
});

The same example with Grunt

module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      dist: {
        src: ['app/js/**/*.js'],
        dest: 'app.js'
      }
    },
    uglify: {
      dist: {
        files: {
          'build/app.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('build', ['concat', 'uglify']);

};

To run the example:

npm install grunt --save  
npm install --save grunt-contrib-uglify  
npm install --save grunt-contrib-concat

grunt build  

As the Grunt and Gulp files grow, it will be easy to see the difference and the comfort Gulp allows. Here is part of the Gulp file we use on our projects:

Sample partial gulpfile