Gulp Notes

gulpexample.js

'use strict';

// If you're unfamiliar with streams a lot of Gulp will seem super confusing.
// Streams are really critical to Node, and increasingly to the front-end.

// An excellent read: https://github.com/substack/stream-handbook

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var connect = require('gulp-connect');

// This is maybe a little esoteric, but a good example of why Gulp is potentially
// a better idea than Grunt; browserify itself is Node based, and the library
// exposes a stream. So you don't have to wrap it with a grunt task like `grunt-browserify`,
// you can just directly use it.

// Note that there *are* projects like `gulp-browserify`, but the gulp community is
// very keen on flagging projects that unnecessarily wrap. Note that gulp-browserify has been
// blacklisted by the Gulp community for that reason. Very interesting.
// https://github.com/deepak1556/gulp-browserify

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

  var bundler = browserify({
    entries: ['./app/scripts/app.js'],
    debug: true,
    transform: ['debowerify']
  });

  return bundler
    .plugin('minifyify', {
      map: 'bundle.map.json',
      output: 'dist/scripts/bundle.map.json'
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(connect.reload());
});

// The following three tasks might be combined... but I'm
// not sure what they right syntax is. 
// gulp.src('./app/**/*.css|./app/**/*.js') or something.

gulp.task('bower', function() {
  gulp.src('./bower_components/**/*.*', {
    base: './bower_components'
  })
    .pipe(gulp.dest('dist/bower_components/'));
});

gulp.task('css', function() {
  return gulp.src('./app/**/*.css')
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload());
});

gulp.task('html', function() {
  return gulp.src('./app/*.html')
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload());
});

// Okay, meat and potatoes here. The array of strings is actually the
// dependencies for this task, so Gulp will make sure those run before executing
// the callback.

gulp.task('server', ['html', 'css', 'bower', 'scripts'], function() {
  connect.server({
    root: ['dist'],
    port: 9000,
    livereload: true,
    middleware: function() {
      return [
        require('connect-gzip').gzip()
      ];
    }
  });
});

// I've added 'html' as a dependency here just for show; Gulp is smart enough
// to know that 'html' was defined as a dependency of 'server' above, so if you run this
// it won't try to run 'html' twice, for example. It'll run in this order:
//   1) 'server's dependencies.
//   2) 'server'
//   3) 'watch'
// Another important thing to note is that the arrays of strings execute at the same time,
// on different threads. That's where the speed benefits of Gulp over Grunt come in,
// so its important to organize your dependencies in such a way that you can take advantage
// of it.

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