Gulp workflow 1st try

gulpfile.js

@@ -0,0 +1,111 @@
+var source = require('vinyl-source-stream');
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var browserify = require('browserify');
+var babelify = require('babelify');
+var watchify = require('watchify');
+var notify = require('gulp-notify');
+
+var stylus = require('gulp-stylus');
+var autoprefixer = require('gulp-autoprefixer');
+var uglify = require('gulp-uglify');
+var rename = require('gulp-rename');
+var buffer = require('vinyl-buffer');
+
+var browserSync = require('browser-sync');
+var reload = browserSync.reload;
+var historyApiFallback = require('connect-history-api-fallback')
+
+
+/*
+  Styles Task
+*/
+
+gulp.task('styles',function() {
+  // move over fonts
+
+  gulp.src('css/fonts/**.*')
+    .pipe(gulp.dest('build/css/fonts'))
+
+  // Compiles CSS
+  gulp.src('css/style.styl')
+    .pipe(stylus())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('./build/css/'))
+    .pipe(reload({stream:true}))
+});
+
+/*
+  Images
+*/
+gulp.task('images',function(){
+  gulp.src('css/images/**')
+    .pipe(gulp.dest('./build/css/images'))
+});
+
+/*
+  Browser Sync
+*/
+gulp.task('browser-sync', function() {
+    browserSync({
+        // we need to disable clicks and forms for when we test multiple rooms
+        server : {},
+        middleware : [ historyApiFallback() ],
+        ghostMode: false
+    });
+});
+
+function handleErrors() {
+  var args = Array.prototype.slice.call(arguments);
+  notify.onError({
+    title: 'Compile Error',
+    message: '<%= error.message %>'
+  }).apply(this, args);
+  this.emit('end'); // Keep gulp from hanging on this task
+}
+
+function buildScript(file, watch) {
+  var props = {
+    entries: ['./src/' + file],
+    debug : true,
+    transform:  [babelify.configure({ stage : 0 })],
+    cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
+  };
+
+  // watchify() if watch requested, otherwise run browserify() once
+  var bundler = watch ? watchify(browserify(props)) : browserify(props);
+
+  function rebundle() {
+    var stream = bundler.bundle();
+    return stream
+      .on('error', handleErrors)
+      .pipe(source(file))
+      .pipe(rename('build.js'))
+      .pipe(gulp.dest('./build/'))
+      // If you also want to uglify it
+      // .pipe(buffer())
+      // .pipe(uglify())
+      // .pipe(rename('app.min.js'))
+      // .pipe(gulp.dest('./build'))
+      .pipe(reload({stream:true}))
+  }
+
+  // listen for an update and run rebundle
+  bundler.on('update', function() {
+    rebundle();
+    gutil.log('Rebundle...');
+  });
+
+  // run it once the first time buildScript is called
+  return rebundle();
+}
+
+gulp.task('scripts', function() {
+  return buildScript('app.jsx', false); // this will run once because we set watch to false
+});
+
+// run 'scripts' task first, then watch for future changes
+gulp.task('default', ['images','styles','scripts','browser-sync'], function() {
+  gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes
+  return buildScript('app.jsx', true); // browserify watch for JS changes
+});

package.json

@@ -49,12 +49,22 @@
     "browserify": "^8.0.3",
     "clean-css": "^3.1.9",
     "eslint": "^0.14.1",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-notify": "^2.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-stylus": "^2.1.0",
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
     "nodemon": "^1.5.0",
+    "reactify": "^1.1.1",
     "rework": "^1.0.1",
     "rework-npm": "^1.0.0",
     "rework-npm-cli": "^0.1.1",
     "serve": "^1.4.0",
     "uglify-js": "^2.4.15",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
     "watchify": "^2.1.1"
   }
 }