Gulp + browserify + watchify

gulpfile.js

var gulp = require('gulp')
var $    = require('gulp-load-plugins')()
var watching


gulp.task('server', function() {
  return gulp.src('dist')
    .pipe($.webserver({
      livereload: true,
      open: true,
      port: 1337,
      fallback: 'index.html'
    }))
})

gulp.task('default', ['server'], function() {
  if (!watching) browserifyBundle(true)

  gulp.watch(['app/**/*.jade'], ['jade'])
  gulp.watch(['app/styles/**/*'], ['stylus'])
})

gulp.task('stylus', function() {
  return gulp.src('app/styles/app.styl')
    .pipe($.stylus())
    .pipe($.autoprefixer())
    .pipe(gulp.dest('dist/styles'))
})

gulp.task('jade', function() {
  gulp.src('app/*.jade')
    .pipe($.jade({ pretty: true }))
    .pipe(gulp.dest('dist'))

  gulp.src('app/scripts/**/*.jade')
    .pipe($.jade({ pretty: true }))
    .pipe(gulp.dest('dist/views/'))
})

// Let's do some browserifycation!
var source     = require('vinyl-source-stream')
var browserify = require('browserify')
var watchify   = require('watchify')


function browserifyBundle(watch) {
  console.log('browserify!')
  var b = browserify({
    cache: {},
    packageCache: {},
    fullPaths: true,
    debug: true,
    entries: ['./app/scripts/app.js']
  })

  if (watch) {
    console.log('watchify!')
    watching = true
    b = watchify(b)
      .on('log', function(msg) { console.log(msg) })
      .on('update', function() {
        rebundle(b)
      })
  }

  rebundle(b)

  function rebundle(b) {
    console.log('browserify rebundling..')
    b.bundle()
      .pipe(source('app.js'))
      .pipe(gulp.dest('dist/scripts/'))
  }
}