gulpfile.js

var gulp = require('gulp'),
  to5ify = require('6to5ify'),
  browserify = require('browserify'),
  watchify = require('watchify'),
  source = require('vinyl-source-stream'),
  reactify = require('reactify'),
  gutil = require('gulp-util'),
  webserver = require('gulp-webserver'),
  sourcemaps = require('gulp-sourcemaps'),
  buffer = require('vinyl-buffer'),
  sass = require('gulp-ruby-sass');

var pkg = require('./package.json');

gulp.task('default', function() {
  gulp.start('compileJS', 'sass', 'webserver', 'watch');
});

gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', ['sass']);
});

gulp.task('compileJS', function() {
  return compileJS(true);
});

gulp.task('sass', function() {
  return gulp.src('src/scss/' + pkg.name + '.scss')
    .pipe(sass({ style: 'expanded', loadPath: ['./bower_components/'] }))
    .on('error', handleError)
    .pipe(gulp.dest('public/css'))
});

gulp.task('webserver', function() {
  gulp.src('public')
    .pipe(webserver({
      livereload: true
    }));
});

function compileJS(watch) {
  var bundler, rebundle;
  bundler = browserify('./src/js/' + pkg.name + '.js', {
    basedir: __dirname,
    debug: true,
    cache: {}, // required for watchify
    packageCache: {}, // required for watchify
    fullPaths: watch // required to be true only for watchify
  });
  if(watch) {
    bundler = watchify(bundler)
  }

  bundler.transform(to5ify);

  rebundle = function() {
    var stream = bundler.bundle();
    stream.on('error', handleError('Browserify'));
    return stream.pipe(source(pkg.name + '.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
      .pipe(sourcemaps.write('./')) // writes .map file
      .pipe(gulp.dest('./public/js'));
  };

  bundler.on('update', rebundle);
  return rebundle();
}

function handleError(task) {
  return function(err) {
    gutil.log(gutil.colors.red(err));
  };
}