remove npm start scripts, add gulp for build and watch, add source maps

README.md

@@ -18,9 +18,7 @@ Install some nice extensions for Chrom(e|ium):
 git clone git@bitbucket.org:ascribe/onion.git
 cd onion
 npm install
-npm run watch
+gulp serve
-
-python -mSimpleHTTPServer
 ```
 
 

gulpfile.js

@@ -0,0 +1,67 @@
+var gulp = require('gulp');
+var gulpif = require('gulp-if');
+var sourcemaps = require('gulp-sourcemaps');
+var util = require('gulp-util');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var watchify = require('watchify');
+var browserify = require('browserify');
+var browserSync = require('browser-sync');
+var babelify = require('babelify');
+var notify = require('gulp-notify');
+var _ = require('lodash');
+ 
+gulp.task('build', function() {
+    bundle(false);
+});
+ 
+gulp.task('serve', ['browser-sync'], function() {
+    bundle(true);
+});
+
+gulp.task('browser-sync', function() {
+    browserSync({
+        server: {
+            baseDir: "."
+        },
+        port: process.env.PORT || 3000
+    });
+});
+
+function bundle(watch) {
+    var bro;
+ 
+    if (watch) {
+        bro = watchify(browserify('./js/app.js',
+            // Assigning debug to have sourcemaps
+            _.assign(watchify.args, {
+                debug: true
+            })));
+        bro.on('update', function() {
+            rebundle(bro, true);
+        });
+    } else {
+        bro = browserify('./js/app.js', {
+            debug: true
+        });
+    }
+ 
+    bro.transform(babelify.configure({
+        compact: false
+    }));
+ 
+    function rebundle(bundler, watch) {
+        return bundler.bundle()
+            .on('error', notify.onError('Error: <%= error.message %>'))
+            .pipe(source('app.js'))
+            .pipe(buffer())
+            .pipe(sourcemaps.init({
+                loadMaps: true
+            })) // loads map from browserify file
+            .pipe(sourcemaps.write()) // writes .map file
+            .pipe(gulp.dest('./build'))
+            .pipe(browserSync.stream());
+    }
+ 
+    return rebundle(bro);
+}

package.json

@@ -3,26 +3,24 @@
   "version": "0.0.1",
   "description": "Das neue web client for Ascribe",
   "main": "js/app.js",
-  "scripts": {
-    "watch": "watchify -o build/app.js -v -d js/app.js",
-    "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > build/app.js",
-    "test": "jest"
-  },
   "author": "Ascribe",
   "license": "Copyright",
-  "browserify": {
-    "transform": [
-      "babelify",
-      "envify"
-    ]
-  },
   "devDependencies": {
     "babel-jest": "^4.0.0",
-    "babelify": "^6.0.2",
+    "babelify": "^6.1.2",
+    "browser-sync": "^2.7.5",
     "browserify": "^9.0.8",
     "envify": "^3.4.0",
+    "gulp": "^3.8.11",
+    "gulp-if": "^1.2.5",
+    "gulp-notify": "^2.2.0",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-util": "^3.0.4",
     "jest-cli": "^0.4.0",
+    "lodash": "^3.9.3",
     "reactify": "^1.1.0",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.1.2"
   },
   "dependencies": {