gulp from gulp-start

gulp/index.js

@@ -0,0 +1,4 @@
var requireDir = require('require-dir');

// Require all tasks in gulp/tasks, including subfolders
requireDir('./tasks', { recurse: true });

gulp/tasks/browserSync.js

@@ -0,0 +1,10 @@
var browserSync = require('browser-sync');
var gulp        = require('gulp');

gulp.task('browserSync', ['build'], function() {
  browserSync.init(['build/**'], {
    server: {
      baseDir: ['build', 'src']
    }
  });
});

gulp/tasks/browserify.js

@@ -0,0 +1,53 @@
/* browserify task
   ---------------
   Bundle javascripty things with browserify!

   If the watch task is running, this uses watchify instead
   of browserify for faster bundling using caching.
*/

var browserify   = require('browserify');
var watchify     = require('watchify');
var bundleLogger = require('../util/bundleLogger');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');

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

  var bundleMethod = global.isWatching ? watchify : browserify;

  var bundler = bundleMethod({
    // Specify the entry point of your app
    entries: ['./src/javascript/app.js'],
    // Add file extentions to make optional in your requires
    extensions: ['.js'],
    // Enable source maps!
    debug: true
  });

  var bundle = function() {
    // Log when bundling starts
    bundleLogger.start();

    return bundler
      .bundle()
      // Report compile errors
      .on('error', handleErrors)
      // Use vinyl-source-stream to make the
      // stream gulp compatible. Specifiy the
      // desired output filename here.
      .pipe(source('app.js'))
      // Specify the output destination
      .pipe(gulp.dest('./build/'))
      // Log when bundling completes!
      .on('end', bundleLogger.end);
  };

  if(global.isWatching) {
    // Rebundle with watchify on changes.
    bundler.on('update', bundle);
  }

  return bundle();
});

gulp/tasks/build.js

@@ -0,0 +1,3 @@
var gulp = require('gulp');

gulp.task('build', ['browserify', 'sass', 'images', 'markup']);

gulp/tasks/default.js

@@ -0,0 +1,3 @@
var gulp = require('gulp');

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

gulp/tasks/images.js

@@ -0,0 +1,12 @@
var changed    = require('gulp-changed');
var gulp       = require('gulp');
var imagemin   = require('gulp-imagemin');

gulp.task('images', function() {
  var dest = './build/images';

  return gulp.src('./src/images/**')
    .pipe(changed(dest)) // Ignore unchanged files
    .pipe(imagemin()) // Optimize
    .pipe(gulp.dest(dest));
});

gulp/tasks/markup.js

@@ -0,0 +1,6 @@
var gulp = require('gulp');

gulp.task('markup', function() {
  return gulp.src('src/htdocs/**')
    .pipe(gulp.dest('build'));
});

gulp/tasks/sass.js

@@ -0,0 +1,16 @@
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var handleErrors = require('../util/handleErrors');
var browserSync  = require('browser-sync');

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      compass: true,
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

gulp/tasks/setWatch.js

@@ -0,0 +1,5 @@
var gulp = require('gulp');

gulp.task('setWatch', function() {
  global.isWatching = true;
});

gulp/tasks/watch.js

@@ -0,0 +1,13 @@
/* Notes:
   - gulp/tasks/browserify.js handles js recompiling with watchify
   - gulp/tasks/browserSync.js automatically reloads any files
     that change within the directory it's serving from
*/

var gulp = require('gulp');

gulp.task('watch', ['setWatch', 'browserSync'], function() {
  gulp.watch('src/sass/**', ['sass']);
  gulp.watch('src/images/**', ['images']);
  gulp.watch('src/htdocs/**', ['markup']);
});

gulp/util/bundleLogger.js

@@ -0,0 +1,21 @@
/* bundleLogger
   ------------
   Provides gulp style logs to the bundle method in browserify.js
*/

var gutil        = require('gulp-util');
var prettyHrtime = require('pretty-hrtime');
var startTime;

module.exports = {
  start: function() {
    startTime = process.hrtime();
    gutil.log('Running', gutil.colors.green("'bundle'") + '...');
  },

  end: function() {
    var taskTime = process.hrtime(startTime);
    var prettyTime = prettyHrtime(taskTime);
    gutil.log('Finished', gutil.colors.green("'bundle'"), 'in', gutil.colors.magenta(prettyTime));
  }
};

gulp/util/handleErrors.js

@@ -0,0 +1,15 @@
var notify = require("gulp-notify");

module.exports = function() {

  var args = Array.prototype.slice.call(arguments);

  // Send error to notification center with gulp-notify
  notify.onError({
    title: "Compile Error",
    message: "<%= error.message %>"
  }).apply(this, args);

  // Keep gulp from hanging on this task
  this.emit('end');
};

gulpfile.js

@@ -1,39 +1,12 @@
var gulp = require("gulp");
var gutil = require('gulp-util');
var source = require("vinyl-source-stream");
var browserify = require("browserify");
var debowerify = require("debowerify");
var watchify = require('watchify');

gulp.task("browserify", function () {
  return browserify("./app/js/app.js",
                    { debug: true,
                      insertGlobals:  true })
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("./dist/"));
});


gulp.task("watch", function () {
  var bundler = watchify(browserify('./app/js/app.js', watchify.args));

  // Optionally, you can apply transforms
  // and other configuration options on the
  // bundler just as you would with browserify
  //bundler.transform('brfs')

  bundler.on('update', rebundle)

  function rebundle () {
    return bundler.bundle()
      // log errors if they happen
      .on('error', function(e) {
        gutil.log('Browserify Error', e);
      })
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./dist'))
  }

  return rebundle()
})
/*
  gulpfile.js
  ===========
  Rather than manage one giant configuration file responsible
  for creating multiple tasks, each task has been broken out into
  its own file in gulp/tasks. Any file in that folder gets automatically
  required by the loop in ./gulp/index.js (required below).

  To add a new task, simply add a new task file to gulp/tasks.
*/

require('./gulp');