Gulp is a streaming build system. I found it is much easier than Grunt.

The differene between Gulp and Grunt (slide):

  • With Gulp your build file is code, not config.
  • You use standard libraries to do things.
  • Plugins are simple and do one thing - most are a ~20 line function.
  • Tasks are executed with maximum concurrency.
  • I/O works the way you picture it.

Install

# install gulp globally
$ npm install -g gulp
# install gulp in project
$ npm install --save-dev gulp

Usage

# run gulp default task
$ gulp
# run specific gulp tasks
$ gulp <task> <othertask>
# list all gulp tasks
$ gulp -T

Gulpfile

Create a gulpfile.js at the root of project directory.

var gulp = require('gulp');

gulp.task('default', function(){
  // place code for your default task here
});

Gulp APIs

There are four APIs in gulp:

  • gulp.src(globs[, options])
  • gulp.dest(path)
  • gulp.task(name[, deps], fn)
  • gulp.watch(glob, tasks)

Refer to API Docs.

Plugins

# install gulp plugins
$ npm install gulp-coffee gulp-less --save-dev

Some plugins: More

Sample Tasks

Compile CoffeeScript

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

gulp.task('coffee', function() {
  gulp.src('./coffee/*.coffee')
      .pipe(coffee({ bare: true }))
      .pipe(gulp.dest('./js'));
});

Compile Less

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

gulp.task('less', function() {
  gulp.src('./less/*.less')
      .pipe(less({ compress: true }))
      .pipe(gulp.dest('./css'));
});

Copy Files

gulp.tasks('copy_files', function() {
  gulp.src('./img/**')
      .pipe(gulp.dest('./build/img'));
});

Watch File Changes

gulp.task('watch', function() {
    gulp.watch('coffee/*.coffee', ['coffee']);
    gulp.watch('less/*.less', ['less']);
});

References