swapping build to webpack + crossbow

.gitignore

@@ -4,7 +4,6 @@ npm-debug.log
 .DS_Store
 .sass-cache
 lib/bower_components
-example.server.js
 example.proxy.js
 example.snippet.js
 static/*.html

bs-config.js

@@ -0,0 +1,51 @@
+/**
+ * Require Browsersync along with webpack and middleware for it
+ */
+var webpack              = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
+
+/**
+ * Require ./webpack.config.js and make a bundler from it
+ */
+var webpackConfig = require('./webpack.config');
+
+webpackConfig.plugins = webpackConfig.plugins = [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+];
+
+webpackConfig.debug = true;
+webpackConfig.devtool = "#eval-source-map";
+webpackConfig.entry = webpackConfig.entry.concat([
+    'webpack/hot/dev-server',
+    'webpack-hot-middleware/client',
+]);
+
+var bundler = webpack(webpackConfig);
+
+/**
+ * Run Browsersync and use middleware for Hot Module Replacement
+ */
+module.exports = {
+    server: 'test/fixtures',
+    //watchOptions: {
+    //    usePolling: true
+    //},
+    plugins: ['/Users/shaneobsourne/code/UI'],
+    middleware: [
+        webpackDevMiddleware(bundler, {
+            // IMPORTANT: dev middleware can't access config, so we should
+            // provide publicPath by ourselves
+            publicPath: webpackConfig.output.publicPath,
+
+            // pretty colored output
+            stats: { colors: true }
+
+            // for other settings see
+            // http://webpack.github.io/docs/webpack-dev-middleware.html
+        }),
+        webpackHotMiddleware(bundler)
+    ]
+};

crossbow.yaml

@@ -0,0 +1,9 @@
+watch:
+  tasks:
+    default:
+      "src/scss/**": ["sass"]
+
+config:
+  sass:
+    input: "src/scss/core.scss"
+    output: "public/css/core.min.css"

example.server.js

@@ -0,0 +1,7 @@
+var bs = require('browser-sync').create();
+bs.use(require('./'));
+
+bs.init({
+    server: 'test/fixtures',
+    open: false
+});

gulpfile.js

@@ -11,12 +11,6 @@ var uglify      = require("gulp-uglify");
 var minifyCSS   = require("gulp-minify-css");
 var easysvg     = require("easy-svg");
 var browserSync = require("browser-sync");
-var browserify  = require("browserify");
-var watchify    = require("watchify");
-var exorcist    = require("exorcist");
-watchify.args.debug = true;
-var source      = require("vinyl-source-stream");
-var buffer      = require("vinyl-buffer");
 var crossbow    = require("crossbow");
 
 /**
@@ -105,21 +99,10 @@ gulp.task("sass", function () {
         });
 });
 
-/**
- * Compile CSS
- */
-gulp.task("bs-inject", function () {
-    browserSync.reload(["core.css", "components.css"]);
-});
-
 /**
  * Compile HTML
  */
 gulp.task("crossbow", function () {
-    //crossbow.clearCache();
-    //crossbow.emitter.on("_error", function (err) {
-    //    console.log(err.message);
-    //});
     return gulp.src([
         "src/crossbow/*.hbs",
         "src/crossbow/components/*.hbs",
@@ -154,8 +137,6 @@ gulp.task("svg", function () {
 gulp.task("dev-frontend", ["crossbow", "browser-sync-dev"], function () {
     gulp.watch("src/scss/**/*.scss", ["sass"]);
     gulp.watch(["src/crossbow/**"], ["crossbow"]);
-    //gulp.watch(["src/svg/**"], ["svg", "crossbow", browserSync.reload]);
-    //gulp.watch("src/scripts/**/*.js", ["js", browserSync.reload]);
 });
 
 gulp.task("build", ["sass", "js"]);

lib/server.js

@@ -4,7 +4,7 @@ var path        = require("path");
 var config      = require("./config");
 var svg         = publicFile(config.defaults.public.svg);
 var indexPage   = publicFile(config.defaults.indexPage);
-var css         = publicFile(config.defaults.public.css);
+//var css         = publicFile(config.defaults.public.css);
 var header      = staticFile(config.defaults.components.header);
 var footer      = staticFile(config.defaults.components.footer);
 var zlib        = require("zlib");
@@ -24,7 +24,7 @@ function startServer(ui) {
     var app         = connect();
     var socketJs    = getSocketJs(ui);
     var jsFilename  = "/" + md5(socketJs, 10) + ".js";
-    var cssFilename = "/" + md5(css, 10)   + ".css";
+    //var cssFilename = "/" + md5(css, 10)   + ".css";
 
     /**
      * Create a single big file with all deps
@@ -35,6 +35,7 @@ function startServer(ui) {
     // also serve for convenience/testing
     app.use(serveFile(config.defaults.pagesConfig, "js", ui.pagesConfig));
 
+    //
     app.use(serveFile(config.defaults.clientJs, "js",    ui.clientJs));
 
     /**
@@ -48,15 +49,13 @@ function startServer(ui) {
             .replace("%templates%", ui.templates)
             .replace("%svg%", svg)
             .replace("%header%", header)
-            .replace(/%footer%/g, footer) // multiple footers
-            .replace("%appjs%", jsFilename)
-            .replace("%appcss%", cssFilename)
+            .replace(/%footer%/g, footer)
     );
 
     /**
      * gzip css
      */
-    app.use(serveFile(cssFilename, "css", css));
+    //app.use(serveFile(cssFilename, "css", css));
 
     app.use(serveStatic(path.join(__dirname, "../public")));
 

package.json

@@ -28,7 +28,11 @@
     "e2e": "./test/pro.sh",
     "selenium": "webdriver-manager start",
     "pre-release": "npm run backend && npm run e2e",
-    "test": "npm run backend"
+    "test": "npm run backend",
+    "nodemon": "nodemon example.server.js --watch public/js --watch lib",
+    "webpack": "webpack --watch",
+    "watch": "parallelshell 'npm run webpack' 'npm run nodemon'",
+    "build": "webpack && uglifyjs public/js/app.js -o public/js/app.min.js"
   },
   "dependencies": {
     "async-each-series": "^0.1.1",
@@ -47,29 +51,31 @@
     "chai": "^1.10.0",
     "compression": "^1.5.0",
     "crossbow": "^0.4.5",
+    "crossbow-cli": "^2.0.0",
+    "crossbow-sass": "^2.0.0",
     "easy-svg": "^1.0.4",
     "eazy-logger": "^2.1.2",
-    "exorcist": "^0.4.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "2.1.0",
     "gulp-contribs": "0.0.2",
     "gulp-filter": "^2.0.0",
     "gulp-jshint": "^1.11.2",
-    "gulp-minify-css": "^0.4.3",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^1.3.2",
-    "gulp-uglify": "^1.2.0",
     "lodash": "^3.10.0",
     "mocha": "^2.2.5",
     "no-abs": "0.0.0",
+    "nodemon": "^1.4.1",
     "object-path": "^0.9.2",
+    "parallelshell": "^2.0.0",
     "pretty-js": "^0.1.8",
     "protractor": "^2.1.0",
     "request": "^2.58.0",
     "sinon": "^1.15.4",
     "store": "^1.3.17",
     "supertest": "^0.15.0",
-    "webpack": "^1.11.0"
+    "webpack": "^1.11.0",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^1.2.0"
   },
   "keywords": [
     "browser sync",