Watchify working with Google Web Starter Kit (via sudostack)

gulpfile.js

/**
 *
 *  Web Starter Kit
 *  Copyright 2014 Google Inc. All rights reserved.
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License
 *
 */

'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 nodeMon = require('gulp-nodemon');
var jade = require('gulp-jade');
var exclude    = require('gulp-ignore').exclude;
var browserify = require('browserify'),
    watchify   = require('watchify'),
    // WARNING: don't use the `gulp-browserify` plugin because it is black-listed by GulpJS
    // The plugin is unnecessary; vinyl-source-stream gives access to node-browserify API directly
    // Benefits - 100% access to Browserify features/API and it's current version
    // http://www.snip2code.com/Snippet/92189/How-to-get-Browserify-Watchify-working-w/
    source     = require('vinyl-source-stream');

var reload = browserSync.reload;

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

// Lint JavaScript
gulp.task('jshint', function () {
  return gulp.src('app/scripts/**/*.js')
    .pipe(exclude('/Users/thadk/gitrepos/node-apps/content_syllabus/app/scripts/bundle.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'], {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'}));
});

gulp.task('browserify', ['jshint'], function() {
  var bundleMethod = global.isWatching ? watchify : browserify;
  // relative entry point for bundle generation
  var bundler = bundleMethod('./app/scripts/main.js');
 
  var bundle = function() {
    return bundler
      .bundle({ debug: true })
      .on('error', function(e) {
        console.log('Browserify Error', e);
      })
      // output file name
      .pipe(source('bundle.js'))
      // output destination
      .pipe(gulp.dest('./app/scripts/'));
  };
 
  if( global.isWatching ){
    // rebundle on change
    bundler.on('update', bundle);
  }
  
  return bundle();
});

gulp.task('browserify:dist',  function() {
  var bundleMethod = global.isWatching ? watchify : browserify;
  // relative entry point for bundle generation
  var bundler = bundleMethod('./app/scripts/main.js');
 
  var bundle = function() {
    return bundler
      .bundle({ debug: true })
      .on('error', function(e) {
        console.log('Browserify Error', e);
      })
      // output file name
      .pipe(source('bundle.js'))
      // output destination
      .pipe(gulp.dest('./dist/scripts'));
  };
 
  if( global.isWatching ){
    // rebundle on change
    bundler.on('update', bundle);
  }
  
  return bundle();
});

// Automatically Prefix CSS
gulp.task('styles:css', function () {
  return gulp.src('app/styles/**/*.css')
    .pipe($.changed('app/styles'))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('app/styles'))
    .pipe($.size({title: 'styles:css'}));
});

// Compile Sass For Style Guide Components (app/styles/components)
gulp.task('styles:components', function () {
  return gulp.src('app/styles/components/components.scss')
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10,
      loadPath: ['app/styles/components']
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('app/styles/components'))
    .pipe($.size({title: 'styles:components'}));
});

// Compile Any Other Sass Files You Added (app/styles)
gulp.task('styles:scss', function () {
  return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10,
      loadPath: ['app/styles']
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.size({title: 'styles:scss'}));
});

// Output Final CSS Styles
gulp.task('styles', ['styles:components', 'styles:scss', 'styles:css']);

// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
  return gulp.src('app/**/*.html')
    .pipe($.useref.assets({searchPath: '{.tmp,app}'}))
    // Concatenate And Minify JavaScript
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    // Remove Any Unused CSS
    // Note: If not using the Style Guide, you can delete it from
    // the next line to only include styles your project uses.
    .pipe($.if('*.css', $.uncss({
      html: [
        'app/index.html',
        'app/styleguide/index.html'
      ],
      // CSS Selectors for UnCSS to ignore
      ignore: [
        '.navdrawer-container.open',
        /.app-bar.open/
      ]
    })))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe($.useref.restore())
    .pipe($.useref())
    // Update Production Style Guide Paths
    .pipe($.replace('components/components.css', 'components/main.min.css'))
    // Minify Any HTML
    .pipe($.if('*.html', $.minifyHtml()))
    // Output Files
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

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


// Watch Files For Changes & Reload
gulp.task('serve', ['serve-api','browserify'], function () {
  browserSync({
    notify: false,
    proxy: 'localhost:9090'
  });

/************************
 * Strange bug here with the browserify that it only does the jshint and goes straight to reload without browserify
 * -thadk
 ***/

  gulp.watch(['app/**/*.html'], reload);
  gulp.watch(['app/styles/**/*.scss'], ['styles:components', 'styles:scss']);
  gulp.watch(['{.tmp,app}/styles/**/*.css'], ['styles:css', reload]);
  gulp.watch(['app/scripts/**/*.js','!app/scripts/bundle.js'], ['browserify',reload]);
  gulp.watch(['app/images/**/*'], reload);
});

// Build and serve the output from the dist build
gulp.task('serve:dist', ['serve-api:dist', 'default'], function () {
  browserSync({
    notify: false,
    proxy: 'localhost:9090'
  });
});

gulp.task('serve-api:dist',function(cb) {
  var called = false;
  return nodeMon({
      script: 'mock-api.js',
      ext: 'js',
      ignore: ['gulpfile.js','app/**', 'lib/**', 'node_modules/**', 'dist/**'],
      env: { 'NODE_ENV': 'production' }
  }).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

gulp.task('serve-api' ,function(cb) {
  var called = false;
  return nodeMon({
      script: 'mock-api.js',
      ext: 'js',
      ignore: ['gulpfile.js','app/**', 'lib/**', 'node_modules/**', 'dist/**'],
      env: { 'NODE_ENV': 'development' }
  }).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
  runSequence('styles', ['browserify:dist', '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) {}

You can remove the reload from the tasks array. It's not supposed to be there. You'll notice the stream in your jshint task pipes to reload. Once the browserify task is called, it calls jshint first. Because of this, It'll reload before browserify finishes, so what you want to do is take the .pipe(reload({stream: true, once: true})) out of jshint and add it as the last process in the stream on the browserify task on line 104.

Let me know if that fixes it. :)