replace browserify in favor of webpack

Author: Swiip

app/src/preprocessors.js

@@ -35,17 +35,20 @@ module.exports = function(GulpAngularGenerator) {
   /**
    * Compute gulp inject task dependencies depending on js and css preprocessors
    */
-  GulpAngularGenerator.prototype.computeInjectTaskDeps = function computeInjectTaskDeps() {
-    this.injectTaskDeps = [];
-    if (this.props.cssPreprocessor.key !== 'none') {
-      this.injectTaskDeps.push('\'styles\'');
+  GulpAngularGenerator.prototype.computeWatchTaskDeps = function computeInjectTaskDeps() {
+    this.watchTaskDeps = [];
+
+    if (this.props.jsPreprocessor.srcExtension === 'es6') {
+      this.watchTaskDeps.push('\'scripts:watch\'');
     }
 
-    if (this.props.jsPreprocessor.key === 'traceur') {
-      this.injectTaskDeps.push('\'browserify\'');
-    } else {
-      this.injectTaskDeps.push('\'scripts\'');
+    if (this.props.htmlPreprocessor.key !== 'none') {
+      this.watchTaskDeps.push('\'markups\'');
     }
+
+    this.watchTaskDeps.push('\'inject\'');
+
+    console.log('this.watchTaskDeps', this.watchTaskDeps);
   };
 
   /**

app/templates/_package.json

@@ -45,13 +45,12 @@
     "gulp-coffee": "~2.3.1",
     "gulp-coffeelint": "~0.4.0",
 <% } if (props.jsPreprocessor.srcExtension === 'es6') { %>
-    "browserify": "~8.1.1",
-    "vinyl-buffer": "~1.0.0",
-    "vinyl-source-stream": "~1.0.0",
+    "gulp-webpack": "~1.2.0",
+    "jshint-loader": "~0.8.3",
 <% } if (props.jsPreprocessor.key === 'babel') { %>
-    "babelify": "~5.0.3",
+    "babel-loader": "~4.0.0",
 <% } if (props.jsPreprocessor.key === 'traceur') { %>
-    "gulp-traceur": "~0.17.0",
+    "traceur-loader": "~0.6.3",
 <% } if (props.jsPreprocessor.key === 'typescript') { %>
     "gulp-typescript": "~2.4.0",
     "gulp-tslint": "~1.4.1",

app/templates/gulp/_inject.js

@@ -7,12 +7,7 @@ var $ = require('gulp-load-plugins')();
 var wiredep = require('wiredep').stream;
 
 module.exports = function(options) {
-<% if (_.isEmpty(injectTaskDeps)) { %>
   gulp.task('inject', function () {
-<% } else { %>
-  gulp.task('inject', [<%= injectTaskDeps.join(', ') %>], function () {
-<% } %>
-
     var injectStyles = gulp.src([
 <% if (props.cssPreprocessor.key !== 'none') { %>
       options.tmp + '/serve/{app,components}/**/*.css',

app/templates/gulp/_scripts.js

@@ -4,25 +4,19 @@ var gulp = require('gulp');
 var browserSync = require('browser-sync');
 <% if (props.jsPreprocessor.key === 'typescript') { %>
 var mkdirp = require('mkdirp');
-<% } if (props.jsPreprocessor.srcExtension === 'es6') { %>
-var browserify = require('browserify');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-<% } if (props.jsPreprocessor.key === 'babel') { %>
-var babelify = require('babelify');
 <% } %>
 
 var $ = require('gulp-load-plugins')();
 
 module.exports = function(options) {
-<% if (props.jsPreprocessor.key === 'typescript') { %>
+<% if (props.jsPreprocessor.srcExtension !== 'es6') { %>
+<%   if (props.jsPreprocessor.key === 'typescript') { %>
   gulp.task('scripts', ['tsd:install'], function () {
     mkdirp.sync(options.tmp);
 
-<% } else { %>
+<%   } else { %>
   gulp.task('scripts', function () {
-<% } %>
-<% if (props.jsPreprocessor.key !== 'babel') { %>
+<%   } %>
     return gulp.src(options.src + '/{app,components}/**/*.<%= props.jsPreprocessor.extension %>')
 <%   if (props.jsPreprocessor.extension === 'js') { %>
       .pipe($.jshint())
@@ -53,33 +47,46 @@ module.exports = function(options) {
 <%   } %>
       .pipe(browserSync.reload({ stream: true }))
       .pipe($.size());
+  });
 <% } else { %>
-    return browserify({ debug: true })
-      .add('./' + options.src + '/app/index.js')
-      .transform(babelify)
-      .bundle().on('error', options.errorHandler('Browserify'))
-      .pipe(source('index.js'))
-      .pipe(buffer())
-      .pipe($.sourcemaps.init({ loadMaps: true }))
-      .pipe($.sourcemaps.write())
-      .pipe(gulp.dest(options.tmp + '/serve/app'))
-      .pipe(browserSync.reload({ stream: true }))
-      .pipe($.size());
-<% } %>
+  function webpack(watch, callback) {
+    return gulp.src(options.src + '/app/index.js')
+      .pipe($.webpack({
+        watch: watch,
+        module: {
+          preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader'}],
+<%   if (props.jsPreprocessor.key === 'babel') { %>
+          loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}]
+<%   } if (props.jsPreprocessor.key === 'traceur') { %>
+          loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'traceur-loader'}]
+<%   } %>
+        },
+        output: { filename: 'index.js' }
+      }, null, function(err, stats) {
+        if(err) {
+          options.errorHandler('Webpack')(err);
+        }
+        $.util.log(stats.toString({
+          colors: $.util.colors.supportsColor,
+          chunks: false,
+          hash: false,
+          version: false
+        }));
+        browserSync.reload();
+        if(watch) {
+          watch = false;
+          callback();
+        }
+      }))
+      .pipe(gulp.dest(options.tmp + '/serve/app'));
+  }
+
+  gulp.task('scripts', function () {
+    return webpack(false);
   });
 
-<% if (props.jsPreprocessor.key === 'traceur') { %>
-  gulp.task('browserify', ['scripts'], function () {
-    return browserify({ debug: true })
-      .add('./' + options.tmp + '/<%= props.jsPreprocessor.key %>/app/index.js')
-      .bundle().on('error', options.errorHandler('Browserify'))
-      .pipe(source('index.js'))
-      .pipe(buffer())
-      .pipe($.sourcemaps.init({ loadMaps: true }))
-      .pipe($.sourcemaps.write())
-      .pipe(gulp.dest(options.tmp + '/serve/app'))
-      .pipe(browserSync.reload({ stream: true }))
-      .pipe($.size());
+  gulp.task('scripts:watch', function (callback) {
+    return webpack(true, callback);
   });
-<% } %>
+<% } %>
 };

app/templates/gulp/_watch.js

@@ -10,11 +10,7 @@ function isOnlyChange(event) {
 }
 
 module.exports = function(options) {
-<% if (props.htmlPreprocessor.key === 'none') { %>
-  gulp.task('watch', ['inject'], function () {
-<% } else { %>
-  gulp.task('watch', ['markups', 'inject'], function () {
-<% } %>
+  gulp.task('watch', [<%= watchTaskDeps.join(', ') %>], function () {
 
     gulp.watch([options.src + '/*.html', 'bower.json'], ['inject']);
 
@@ -37,24 +33,22 @@ module.exports = function(options) {
       }
     });
 
-<% if (props.jsPreprocessor.extension === 'js') { %>
+<% if (props.jsPreprocessor.srcExtension !== 'es6') { %>
+<%   if (props.jsPreprocessor.extension === 'js') { %>
     gulp.watch(options.src + '/{app,components}/**/*.js', function(event) {
-<% } else { %>
+<%   } else { %>
     gulp.watch([
       options.src + '/{app,components}/**/*.js',
       options.src + '/{app,components}/**/*.<%= props.jsPreprocessor.extension %>'
     ], function(event) {
-<% } %>
+<%   } %>
       if(isOnlyChange(event)) {
-<% if (props.jsPreprocessor.key !== 'traceur') { %>
         gulp.start('scripts');
-<% } else { %>
-        gulp.start('browserify');
-<% } %>
       } else {
         gulp.start('inject');
       }
     });
+<% } %>
 
 <% if (props.htmlPreprocessor.key !== 'none') { %>
     gulp.watch(options.src + '/{app,components}/**/*.<%= props.htmlPreprocessor.extension %>', ['markups']);