Introduction to Gulp.js

Jaakko Salonen

@ HelsinkiJS 19.2.2013

- A streaming build system

- Written in JavaScript, runs on node

- Fresh, but quickly gathering momentum

- Uses node.js Streams

- Data processed in steps by "pipelining"

- Easier parallel processing

- No more temp files

Grunt

Gulp

Configuration Code
Tasks Streams
Declarative Scriptable
Gruntfile.js gulpfile.js
1,241+ commits 407+ commits
★ 7,406 ★ 4,108
~400 npm packages ~3000 npm packages

Getting Started

Install gulp (global + project)


npm install -g gulp
npm install --save-dev gulp gulp-util							
						

Create gulpfile.js


var gulp = require('gulp');

gulp.task('default', function() {
    //
});
						

Define tasks


var gulp = require('gulp');

gulp.task('default', function() {
    return gulp
           .src("scripts/**/*.js")
           .pipe(gulp.dest('build/js'));
});						

Define tasks


var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('default', function() {
    return gulp
           .src("scripts/**/*.js")
           .pipe(uglify())
           .pipe(gulp.dest('build/js'));
});
						

Define tasks


var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('default', function() {
    return gulp
           .src("scripts/**/*.js")
           .pipe(uglify())
           .pipe(concat('all.min.js'))
           .pipe(gulp.dest('build/js'));
});
						

Run


							gulp
						

Bitch fight:

Grunt vs. Gulp

(with Yeoman generators)

grunt

mkdir grunt && cd grunt
npm install generator-webapp
yo webapp

Gruntfile.js: 408 LOC

Total build time: 11.9s

gulp

mkdir gulp && cd gulp
npm install generator-gulp-webapp
yo gulp-webapp

gulpfile.js: 101 LOC

Total build time: 6.09s

Should I use Gulp?

If you have a working build

Keep using it and get stuff done

Otherwise give it a go!

Thanks!