Great another Task Runner...

What makes Gulp unique.

Speed

Speedtesting between gulp.js and Grunt

Speed comparison test

Sass compilation

Another Speed comparison test

Javascript minification and concatination using Uglify.js

Write Less do more.

gruntfile.js

Here is an example of a gruntfile.js

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: 'app/styles',
        src: '**/*.scss',
        dest: '../.tmp/styles',
        expand: true,
        ext: '.css'
      }]
    }
  },
  autoprefixer: {
    options: ['last 1 version'],
    dist: {
      files: [{
        expand: true,
        cwd: '.tmp/styles',
        src: '{,*/}*.css',
        dest: 'dist/styles'
      }]
    }
  },
  watch: {
    styles: {
      files: ['app/styles/{,*/}*.scss'],
      tasks: ['sass:dist', 'autoprefixer:dist']
    }
  }
});
grunt.registerTask('default', ['styles', 'watch']);
					

gulpfile.js

Now here is an example of a gulpfile.js doing the same thing.

gulp.task('sass', function () {
  gulp.src('app/styles/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulp.dest('dist/styles'));
});
gulp.task('default', function() {
  gulp.run('sass');
  gulp.watch('app/styles/**/*.scss', function() {
    gulp.run('sass');
  });
});
					

Install Gulp

1. npm install -g gulp
2. Just like Grunt we need to create a package.json file.
3. Install gulp and gulp-utils to your project
   npm install gulp gulp-util --save-dev
4. Create your gulpfile.js

   
   var gulp = require('gulp');
   var gutil = require('gulp-util');
   
   gulp.task('default', function(){
     // Default task code
   });									
   								

5. Now run gulp from the command line and watch the magic.