gulpfile.js

var gulp = require('gulp')
var browserify = require('browserify')
var babelify = require('babelify')
var concat = require('gulp-concat')
var gulpUtil = require('gulp-util')
var imageDataUri = require('gulp-image-data-uri')
var nib = require('nib')
var o = require('object-assign')
var plumber = require('gulp-plumber')
var source = require('vinyl-source-stream')
var standard = require('gulp-standard')
var stylus = require('gulp-stylus')
var watchify = require('watchify')

var browserifyOptions = {
  entries: 'src/js/app.jsx',
  extensions: ['.jsx'],
  debug: true
}

var bundle = function (browserify) {
  return browserify
    .transform(babelify)
    .bundle()
    .on('error', gulpUtil.log.bind(gulpUtil, 'browserify error'))
    .pipe(plumber())
    .pipe(source('app.js'))
    .pipe(gulp.dest('public/js'))
}

gulp.task('js', function () {
  bundle(browserify(browserifyOptions))
})

gulp.task('watch-js', function () {
  var b = watchify(browserify(o({}, watchify.args, browserifyOptions)))
  bundle(b)
  b.on('update', function() { bundle(b) })
  b.on('log', gulpUtil.log)
  b.on('error', gulpUtil.log)
})

gulp.task('html', function () {
  gulp.src('src/index.html')
    .pipe(gulp.dest('public/'))
})

gulp.task('styles', ['inline-images'], function () {
  gulp.src('src/styles/main.styl')
    .pipe(stylus({
      use: nib(),
      'include css': true,
      compress: true,
    }))
    .pipe(gulp.dest('public/styles/'))
})

gulp.task('standard', function () {
  gulp.src('src/js/**/*.js*')
    .pipe(standard())
    .pipe(standard.reporter('default'))
})

gulp.task('inline-images', function () {
  gulp.src('src/images/*')
    .pipe(imageDataUri())
    .pipe(concat('inline-images.css'))
    .pipe(gulp.dest('src/styles/'))
})

gulp.task('dev', ['watch-js', 'html', 'styles'], function () {
  gulp.watch('src/index.html', ['html'])
  gulp.watch('src/styles/**/*.styl', ['styles'])
})