Watchify + Browserify + jade with Google's Web Starter Kit

gulpfile.js

'use strict';

// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var reload = browserSync.reload;
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');

var AUTOPREFIXER_BROWSERS = [
  'ie >= 8',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];


var dist = false; // set to true when `default` task is run

gulp.task('watchify', function(){
  var bundler = watchify(browserify('./app/scripts/main.js'), {
    basedir: './app/scripts', // (roots __dirname)
    debug: true
  });
  var bundle = function() {
    return bundler
      .bundle({ debug: true })
      .on('error', $.notify.onError({
        message: 'watchify error: <%= error.message %>'
      }))
      .pipe(source('bundle.js'))
      // destination changes when `dist` is set to true
      .pipe(gulp.dest( dist ? 'dist/scripts' : './app/build/' ))
      .pipe(reload({stream: true, once: true}));
  };
  // rebundle on change
  bundler.on('update', bundle);
  return bundle();
});


// Lint JavaScript
gulp.task('jshint', function () {
  return gulp.src('app/scripts/**/*.js')
    //.pipe(reload({stream: true, once: true}))
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});


// Optimize Images
gulp.task('images', function () {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/images'))
    .pipe($.size({title: 'images'}));
});


// Copy All Files At The Root Level (app)
gulp.task('copy', function () {
  return gulp.src([
    'app/*',
    '!app/*.html',
    '!app/*.jade',
    '!app/bower_components',
    'node_modules/apache-server-configs/dist/.htaccess'
  ], {
    dot: true
  }).pipe(gulp.dest('dist'))
    .pipe($.size({title: 'copy'}));
});


// Copy Web Fonts To Dist
gulp.task('fonts', function () {
  return gulp.src(['app/fonts/**'])
    .pipe(gulp.dest('dist/fonts'))
    .pipe($.size({title: 'fonts'}));
});


// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
      'app/styles/*.scss',
      'app/styles/**/*.css',
    ])
    .pipe($.changed('styles', {extension: '.scss'}))
    .pipe($.rubySass()
      .on('error', console.error.bind(console))
    )
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe(gulp.dest('dist/styles'))
    .pipe($.size({title: 'styles'}));
});


// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});

  return gulp.src('app/**/*.jade')
    .pipe(assets)
    // Concatenate And Minify JavaScript
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    // Concatenate And Minify Styles
    // In case you are still using useref build blocks
    .pipe($.if('*.css', $.csso()))
    .pipe(assets.restore())
    .pipe($.useref())
    // Compile Jade
    .pipe($.jade())
    // Compile Jade into tmp
    .pipe(gulp.dest('.tmp'))
    // Compile Jade into dist
    .pipe(gulp.dest('dist'))

});


// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));


// Watch Files For Changes & Reload
gulp.task('serve', ['watchify'], function () {
  browserSync({
    notify: false,
    // Run as an https by uncommenting 'https: true'
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    server: ['.tmp', 'app']
  });

  gulp.watch('app/**/*.jade', function(event) {
    compileAndRefresh(event.path);
  });
  gulp.watch(['.tmp/**/*.html'], reload);
  gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
  gulp.watch(['app/scripts/**/*.js'], ['jshint']);
  gulp.watch(['app/images/**/*'], reload);
});


// compile and refresh Jade template
function compileAndRefresh(file) {

  gulp.src(file)
    .pipe($.jade({
      pretty: true
    }))
    .pipe(gulp.dest('.tmp'))

}


// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function () {
  browserSync({
    notify: false,
    // Run as an https by uncommenting 'https: true'
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    server: {
      baseDir: 'dist/'
    }
  });
});


// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
  dist = true; // changes Watchify's build destination
  runSequence('styles', ['jshint', 'watchify', 'html', 'images', 'fonts', 'copy'], cb);
});


// Run PageSpeed Insights
// Update `url` below to the public URL for your site
gulp.task('pagespeed', pagespeed.bind(null, {
  // By default, we use the PageSpeed Insights
  // free (no API key) tier. You can use a Google
  // Developer API key if you have one. See
  // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
  url: 'https://example.com',
  strategy: 'mobile'
}));


// Load custom tasks from the `tasks` directory
try { require('require-dir')('tasks'); } catch (err) {}

package.json

{
  "devDependencies": {
    "apache-server-configs": "^2.7.1",
    "browser-sync": "^1.3.0",
    "browserify": "4.2.3",
    "del": "^0.1.2",
    "gulp": "^3.8.5",
    "gulp-autoprefixer": "^0.0.8",
    "gulp-cache": "^0.2.2",
    "gulp-changed": "^1.0.0",
    "gulp-csso": "^0.2.9",
    "gulp-flatten": "^0.0.2",
    "gulp-if": "^1.2.1",
    "gulp-imagemin": "^1.0.0",
    "gulp-jade": "^0.10.0",
    "gulp-jshint": "^1.6.3",
    "gulp-load-plugins": "^0.5.3",
    "gulp-minify-html": "^0.1.4",
    "gulp-notify": "^2.1.0",
    "gulp-replace": "^0.4.0",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-size": "^1.0.0",
    "gulp-uglify": "^0.3.1",
    "gulp-uncss": "^0.4.5",
    "gulp-useref": "^0.6.0",
    "jshint-stylish": "^0.4.0",
    "opn": "^1.0.0",
    "psi": "^0.1.2",
    "require-dir": "^0.1.0",
    "run-sequence": "^0.3.6",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "0.9.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": true,
  "scripts": {
    "test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
  },
  "dependencies": {},
  "browserify": {
    "transform": []
  },
  "browser": {}
}