nodejs

To “Gulp” or to “Grunt”

Well, the answer is what you prefer! 🙂

Both of these are great tools to automate the tasks for your application. Both have great plugins and allow the developers to really speed up their development cycle by integrating some very cool plugins to automate your process. For instance code analysis, linting, minification and many more, but the question is what would you choose?

Here are some high level differences:

Grunt Gulp
Matured.

More support and bigger community.

More than 5000 plugins.

Relatively newer.

Lesser number of plugins

 

File based

Each task input/output spins up hard-disk as the results are stored in the hard-drive. Multiple tasks require multiple disk read/writes.

Stream based

Gulp uses in-memory streams to run multiple tasks sequentially. Therefore only the final output results in disk activity.

Might perform slower when there are multiple tasks configured. Relatively faster due to in memory processing.
 

Configuration over code.

Tasks are configured using configuration files. This configuration method requires the developer to be knowledgeable of the options for each task.

Gulp prefers code over configuration. Developers might find themselves comfortable with this as it is easier to understand and debug.

Also here are the sample files:

Sample Gulp file

var gulp = require('gulp');
var args = require('yargs').argv;
var $ = require('gulp-load-plugins')({lazy: true});
var config = require('./gulp.config')();
var del = require('del');

gulp.task('vet', function(){
    return gulp.
    src(config.alljs)
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
        .pipe($.jshint.reporter('fail'));
});


gulp.task('styles'/*, ['clean-styles']*/, function(done){
 return gulp.
    src(config.less)
        .pipe($.plumber())
        .pipe($.less())
//        .on('error', errorLogger)
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(config.temp));
});


//----- MORE TASKS

 

Sample Grunt file

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);
};

Most likely if you are just starting up a new project and don’t have much prior experience with these tools then I would assume that you’ll be leaning toward choosing gulp as your task automation tool because of its ease of use and performance but again I will leave it up to you to decide.

References:

http://gruntjs.com/

http://gulpjs.com/

 

 

Standard

One thought on “To “Gulp” or to “Grunt”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s