Grunt vs Gulp

Boris Dinkevich

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 compile SASS files into CSS and
combine, minify and compress multiple JS files into one.

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:

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'))
});

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

To run the example:

npm install --save gulp gulp-concat 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:

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'))
});

Uglify with .pipe(uglify())

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 --save grunt grunt-contrib-uglify 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

Popular