gulp.js

The streaming build system

Glen Arrowsmith 
@garrows

glen.arrowsmith@gmail.com 

https://github.com/garrows/GulpDemo/





Speed. Efficiency. Simplicity.


gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.


Easy to use


By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.



Efficient


By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.



High Quality


gulp's strict plugin guidelines assure plugins stay simple and work the way you expect.



Easy to Learn


With a minimal API surface, you can pick up gulp in no time. Your build works just like you envision it: a series of streaming pipes.



Getting Started


1. Install gulp globally:


 npm install -g gulp


2. Install gulp in your project dev Dependencies:


npm install --save-dev gulp


3. Create a gulpfile.js at the root of your project:


var gulp = require('gulp');

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



4. Run gulp


gulp



How do we really get started?



Gulp.js In Action

  • Browserify
  • LiveReload
  • Bower Install
  • Minification
  • Less
  • JSHint
  • Unit Tests

Browserify

 npm install gulp-browserify --save-dev
var gulp = require('gulp'),
    browserify = require('gulp-browserify');

gulp.task('scripts', function() {

    gulp.src(['./app/js/index.js'])
        .pipe(browserify({
            debug : true,
            fullPaths: true
        }))
        .pipe(gulp.dest('./build/'))
});

gulp.task('default', [
    'scripts'
]);

Gulp Watch

gulp.task('watch', function() {
    gulp.watch(['./app/**/*.js'], ['scripts']);
});

gulp.task('default', [
    'scripts',
    'watch'
]);

Live Reload

npm install gulp-livereload --save-dev

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

 <script src="http://localhost:35729/livereload.js"></script>
var livereloadServer; 
var livereload = function (_file) {
    return function (_path) {
        if (livereloadServer) livereloadServer.changed(_file);
    }
} 

gulp.task('scripts', function() {

    gulp.src(['./app/js/index.js'])
        ...
        .on('end', livereload('.js'));

});

Clean


 npm install gulp-clean --save-dev
var clean = require('gulp-clean');
gulp.task('clean', function() {
    gulp.src(['./build', './bower_components', './node_modules'], {read: false})        .pipe(clean());
});
 gulp clean



Bower Install

npm install bower -gbower init
bower install bootstrap angular --save
npm install gulp-bower --save-devgulp cleangulp
var bower = require('gulp-bower');gulp.task('bower', function() {
    bower()
        .pipe(gulp.dest('./bower_components/'))
});






Minification

npm install gulp-concat gulp-rename gulp-uglify gulp-minify-html --save-dev
var concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    compress = require('gulp-uglify'),
    minifyHTML = require('gulp-minify-html');gulp.task('scriptsLib', function () {
    return gulp.src([
        './bower_components/angular/angular.js'
    ])
        .pipe(concat('libs.js'))
        .pipe(gulp.dest('./build/'));
});
gulp.task('minifyLibsScripts', ['scriptsLib'], function () {
    return gulp.src('./build/libs.js')
        .pipe(compress())
        .pipe(rename('libs.min.js'))
        .pipe(gulp.dest('./build/'));
});gulp.task('minifyHTML', function() {
    var opts = {comments:true,spare:true};

    gulp.src('./app/html/*.html')
        .pipe(minifyHTML(opts))
        .pipe(gulp.dest('./build/'))
        .on('end', livereload('.html'));
});



Parallel? Series?


Test Implementation

var through = require('through2');
module.exports = function(opt) {    
    opt.name = opt.name ? opt.name : "0";
    opt.timeout = opt.timeout ? opt.timeout : 1000;    
    console.log("Constructed: tester " + opt.name);
    function tester(file, encoding, callback) {
        console.log("Started: tester " + opt.name);

        setTimeout(function() {
            console.log("Done: tester " + opt.name);
            callback();
        }, opt.timeout);
    }

    return through.obj(tester);
};
 var gulp = require('gulp'),
    tester = require('./gulp-tester');gulp.task('one', function() {
    gulp.src(['./testInput.js'])
        .pipe(tester({ name : "1.1 - Slowest", timeout: 3000 }))

    gulp.src(['./testInput.js'])
        .pipe(tester({ name : "1.2 - Fast", timeout: 10 }))
});

gulp.task('two', function() {
    gulp.src(['./testInput.js'])
        .pipe(tester({ name : "2.1 - Medium", timeout: 1000 }));
});
gulp.task('default', [
    'one',
    'two'
]);
//  Started: tester 1.1 - Slowest
//  Started: tester 1.2 - Fast
//  Started: tester 2.1 - Medium
//  Done: tester 1.2 - Fast
//  Done: tester 2.1 - Medium
//  Done: tester 1.1 - Slowest


var gulp = require('gulp'),
    tester = require('./gulp-tester');
gulp.task('three', function() {
    gulp.src(['./testInput.js'])
        .pipe(tester({ name : "3.1 - Speedy", timeout: 500 }));
});

gulp.task('four', ['three'], function() {
    gulp.src(['./testInput.js'])
        .pipe(tester({ name : "4.1 - Blitzing", timeout: 1 }));
});

gulp.task('default', [
    'four'
]);
/*
    Started: tester 3.1 - Speedy
    Started: tester 4.1 - Blitzing
    Done: tester 4.1 - Blitzing
    Done: tester 3.1 - Speedy
*/

More


Find Plugins


Questions?

Glen Arrowsmith 

@garrows

glen.arrowsmith@gmail.com 

https://github.com/garrows/GulpDemo/

Gulp.js

By Glen Arrowsmith

Made with Slides.com

Gulp.js

Demo of Gulp.js presented at the brisjs meetup. Demo code can be found at https://github.com/garrows/GulpDemo/

  • 5,702

More from Glen Arrowsmith