Why Gulp over Grunt?
By dxartist, , 0 comments.

Before we get into discussing gulp, we should understand what a 'task runner' is.

What is a Task Runner?

Task runners are tiny applications that are used to automate many time consuming, tedious tasks that you have to do while developing a project. These include tasks such as image compression, running tests, concatenating files, minification, CSS preprocessing. By creating a task file, you can instruct the task runner to automatically take care of just about any development task you can think of as you make changes to your files. It’s a very simple idea that will save you a lot of time and allow you to stay focused on development.

What's so different about gulp?

Streamlined!

Gulp is a streaming build system. You can find detailed explaination here

Plugins

There are a lot of plugins for grunt but gulp plugins are coming up faster. So we can expect a bunch useful of plugins in the near future.

User friendly

In my experience, I have found that gulp has readable code. It's short, simple and easy to write.

A grunt file to minify js

 
    module.exports = function(grunt) {
    grunt.initConfig({
    concat: {
      'dist/all.js': ['src/.js']
    },
    uglify: {
      'dist/all.min.js': ['dist/all.js']
    },
    jshint: {
      files: ['gruntfile.js', 'src/.js']
    },
    watch: {
      files: ['gruntfile.js', 'src/*.js'],
      tasks: ['jshint', 'concat', 'uglify']
    }
  });

// Load Our Plugins grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch');

// Register Default Task grunt.registerTask('default', ['jshint', 'concat', 'uglify']); };

A gulp file to minify js

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

// Lint JS
gulp.task('lint', function() {
  return gulp.src('src/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// Concat & Minify JS
gulp.task('minify', function(){
  return gulp.src('src/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

// Watch Our Files
gulp.task('watch', function() {
  gulp.watch('src/*.js', ['lint', 'minify']);
});

// Default
gulp.task('default', ['lint', 'minify', 'watch']);

I have been using Gulp for many of the automation jobs while developing websites. I have found gulp to be user friendly. Do not do a task again and again, use a task runner that does the job while you can concentrate on actual development.

Posted Sunday 2 November 2014 by @sharathdt Share