update package.json, add gulpfile

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 public/stylesheets/.sass-cache/
 node_modules/
-logs/
+logs/
+build/

gulpfile.js

@@ -0,0 +1,153 @@
+var ENV = process.env.NODE_ENV;
+var IS_DEVELOPMENT;
+
+if (ENV !== 'development' && ENV !== 'production')
+  throw new Error('NODE_ENV must be set to either development or production.');
+else
+  IS_DEVELOPMENT = ENV === 'development';
+
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var reactify = require('reactify');
+var gulpif = require('gulp-if');
+var uglify = require('gulp-uglify');
+var streamify = require('gulp-streamify');
+var notify = require('gulp-notify');
+var cssmin = require('gulp-cssmin');
+var gutil = require('gulp-util');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var sourcemaps = require('gulp-sourcemaps');
+var imagemin = require('gulp-imagemin');
+
+// external dependencies that are not rebundled while developing,
+// but included in production
+var dependencies = [
+  'react',
+  'react/addons',
+  'react-router',
+  'flux',
+  'eventemitter2',
+  'immutable'
+];
+
+var browserifyTask = function() {
+
+  var appBundler = browserify({
+    entries: './src/js/app.js',
+    transform: [[reactify, {harmony: true}]],
+    debug: IS_DEVELOPMENT,
+    // required by watchify
+    cache: {}, packageCache: {}, fullPaths: IS_DEVELOPMENT
+  });
+    
+  (IS_DEVELOPMENT ? dependencies : []).forEach(function(dep) {
+    appBundler.external(dep);
+  });
+
+  var rebundle = function() {
+    var start = Date.now();
+    console.log('Building BROWSERIFY bundle');
+    appBundler.bundle()
+      .on('error', gutil.log)
+      .pipe(source('app.js'))
+      .pipe(gulpif(!IS_DEVELOPMENT, streamify(uglify())))
+      .pipe(gulp.dest(IS_DEVELOPMENT ? './build/js/' : './dist/js/'))
+      .pipe(notify(function() {
+        gutil.log(gutil.colors.green('BROWSERIFY bundle built in ' +
+          (Date.now() - start) + 'ms'));
+      }));
+  };
+
+  if (IS_DEVELOPMENT) {
+    appBundler = watchify(appBundler);
+    appBundler.on('update', rebundle);
+  }
+  
+  rebundle();
+  
+  if (IS_DEVELOPMENT) {
+    var vendorBundler = browserify({
+      debug: true,
+      require: dependencies
+    });
+
+    var start = new Date();
+    console.log('Building VENDOR bundle');
+    vendorBundler.bundle()
+      .on('error', gutil.log)
+      .pipe(source('vendor.js'))
+      .pipe(gulp.dest('./build/js/'))
+      .pipe(notify(function() {
+        gutil.log(gutil.colors.green(
+          'VENDOR bundle built in ' + (Date.now() - start) + 'ms'));
+      }));
+    }
+  
+};
+
+var cssTask = function() {
+  if (IS_DEVELOPMENT) {
+    var run = function() {
+      var start = new Date();
+      console.log('Building CSS bundle');
+
+      gulp.src('./src/css/main.scss')
+        .pipe(sourcemaps.init())
+        .pipe(sass({
+          errLogToConsole: true
+        }))
+        .pipe(sourcemaps.write('./maps'))
+        .pipe(gulp.dest('./build/css/'))
+        .pipe(notify({
+          message: function() {
+            gutil.log(gutil.colors.green(
+              'CSS bundle built in ' + (Date.now() - start) + 'ms'));
+          },
+          onLast: true
+        }));
+    };
+    run();
+    gulp.watch('./src/css/*.scss', run);
+  } else {
+    gulp.src('./src/css/main.scss')
+      .pipe(sass({
+        errLogToConsole: true
+      }))
+      .pipe(autoprefixer({
+        browsers: ['last 2 versions'],
+        cascade: false
+      }))
+      .pipe(cssmin())
+      .pipe(gulp.dest('./dist/css/'))
+      .pipe(notify({
+        message: function() {
+          gutil.log(gutil.colors.green('CSS bundle built.'));
+        },
+        onLast: true
+      }));
+  }
+};
+
+var imageminTask = function() {
+  gulp.src('./src/img/*')
+    .pipe(imagemin({
+      progressive: true,
+      svgoPlugins: [{removeViewBox: false}]
+    }))
+    .pipe(gulp.dest('./dist/img/'))
+    .pipe(notify({
+      message: function() {
+        gutil.log(gutil.colors.green('IMAGES/SVG optimized.'));
+      },
+      onLast: true
+    }));
+};
+
+gulp.task('default', function() {
+  browserifyTask();
+  cssTask();
+  imageminTask();
+});

package.json

@@ -1,16 +1,41 @@
 {
   "name": "retichess",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "scripts": {
     "start": "node server.js"
   },
   "dependencies": {
-    "express": "~3.3.0",
-    "jade": "~0.28.2",
-    "socket.io": "~0.9.16",
-    "winston": "~0.7.3"
+    "express": "^4.12.1",
+    "immutable": "^3.6.2",
+    "jade": "^1.9.2",
+    "socket.io": "^1.3.4",
+    "winston": "^0.9.0"
+  },
+  "devDependencies": {
+    "browserify": "^9.0.3",
+    "eventemitter2": "^0.4.14",
+    "flux": "^2.0.1",
+    "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.1.0",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-if": "^1.2.5",
+    "gulp-imagemin": "^2.2.1",
+    "gulp-notify": "^2.2.0",
+    "gulp-sass": "^1.3.3",
+    "gulp-sourcemaps": "^1.5.0",
+    "gulp-streamify": "0.0.5",
+    "gulp-uglify": "^1.1.0",
+    "gulp-util": "^3.0.4",
+    "jest-cli": "^0.4.0",
+    "jstransform": "^10.0.0",
+    "map-stream": "0.0.5",
+    "react": "^0.12.2",
+    "react-router": "^0.12.4",
+    "reactify": "^1.0.0",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "2.4.0"
   },
   "engines": {
-    "node": ">=0.8.x"
+    "node": "^0.12.0"
   }
 }