Add multiple-file support to recipe gulp.browserify

recipes/gulp.browserify/app/index.html

@@ -10,6 +10,7 @@ <h1>Browsersync Browserify Example</h1>
 
     <div id="example"></div>
 
-    <script src="js/dist/bundle.js"></script>
+    <script src="js/dist/app.js"></script>
+    <script src="js/dist/worker/worker.js"></script>
 </body>
 </html>

recipes/gulp.browserify/app/js/app.js

@@ -1 +1 @@
-let app = 'awesome';
+let app = 'awesome';

recipes/gulp.browserify/app/js/dist/.gitignore

@@ -1 +1,2 @@
-*.js
+*.js
+*.js.map

recipes/gulp.browserify/app/js/worker/worker.js

@@ -0,0 +1 @@
+const worker = 'brilliant';

recipes/gulp.browserify/gulpfile.js

@@ -6,47 +6,86 @@ var watchify    = require('watchify');
 var exorcist    = require('exorcist');
 var browserify  = require('browserify');
 var browserSync = require('browser-sync').create();
+var glob        = require('glob');
+var path        = require('path');
+var mkdirp      = require('mkdirp');
+var mergeStream = require('merge-stream');
+var through     = require('through2');
 
-// Input file.
-watchify.args.debug = true;
-var bundler = watchify(browserify('./app/js/app.js', watchify.args));
+var mkdir = function (dir, opts) {
+    return through.obj(function (file, enc, cb) {
+        mkdirp(dir, opts, function (err, made) {
+            if (err) {
+                cb(new gutil.PluginError('gulp-mkdirp', err), file);
+                return;
+            }
+            cb(null, file);
+        });
+    });
+};
 
-// Babel transform
-bundler.transform(babelify.configure({
-    sourceMapRelative: 'app/js'
-}));
+/**
+ * Creating multiple bundles with watchify
+ */
+gulp.task('bundle', function (done) {
+    glob('./app/js/{app.js,worker/worker.js}', function (err, files) {
+        if (err) {
+            done(err);
+            return;
+        }
 
-// On updates recompile
-bundler.on('update', bundle);
+        var tasks = files.map(function (entry) {
+            var relative = path.relative('./app/js', entry);
+            var sourceMapPath = './app/js/dist/' + relative + '.map';
 
-function bundle() {
+            // Input file.
+            watchify.args.debug = true;
+            var bundler = watchify(browserify(entry, watchify.args));
 
-    gutil.log('Compiling JS...');
+            // Babel transform
+            bundler.transform(babelify.configure({
+                sourceMapRelative: 'app/js'
+            }));
 
-    return bundler.bundle()
-        .on('error', function (err) {
-            gutil.log(err.message);
-            browserSync.notify("Browserify Error!");
-            this.emit("end");
-        })
-        .pipe(exorcist('app/js/dist/bundle.js.map'))
-        .pipe(source('bundle.js'))
-        .pipe(gulp.dest('./app/js/dist'))
-        .pipe(browserSync.stream({once: true}));
-}
+            var bundle = function () {
+                gutil.log('Compiling ' + entry + '...');
 
-/**
- * Gulp task alias
- */
-gulp.task('bundle', function () {
-    return bundle();
+                return bundler.bundle()
+                    .on('error', function (err) {
+                        gutil.log(err.message);
+                        browserSync.notify('Browserify Error!');
+                        this.emit('end');
+                    })
+                    // The mkdir() below is a workaround for an exorcist issue,
+                    // where exorcist fails silently when the output dir does not exist
+                    // see https://github.com/thlorenz/exorcist/issues/18
+                    // and https://github.com/thlorenz/exorcist/pull/19
+                    .pipe(mkdir(path.dirname(sourceMapPath)))
+                    .pipe(exorcist(sourceMapPath))
+                    .pipe(source(relative))
+                    .pipe(gulp.dest('./app/js/dist'))
+                    .pipe(browserSync.stream({once: true}));
+            }
+
+            // On updates recompile
+            bundler.on('update', bundle);
+
+            return bundle();
+        });
+
+        // The resume() below fixes an issue in orchestrator,
+        // where the merged stream does not trigger end event
+        // see https://github.com/grncdr/merge-stream/issues/6
+        // and https://github.com/orchestrator/orchestrator/issues/48
+        mergeStream(tasks).resume().on('end', done);
+    });
 });
 
 /**
  * First bundle, then serve from the ./app directory
  */
 gulp.task('default', ['bundle'], function () {
     browserSync.init({
-        server: "./app"
+        server: './app'
     });
-});
+});

recipes/gulp.browserify/package.json

@@ -8,12 +8,16 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "exorcist": "^0.4.0",
     "babelify": "^6.1.2",
     "browser-sync": "^2.2.1",
     "browserify": "^8.1.3",
+    "exorcist": "^0.4.0",
+    "glob": "^5.0.14",
     "gulp": "^3.8.11",
     "gulp-util": "^3.0.3",
+    "merge-stream": "^1.0.0",
+    "mkdirp": "^0.5.1",
+    "through2": "^2.0.0",
     "vinyl-source-stream": "^1.0.0",
     "watchify": "^2.3.0"
   }

recipes/gulp.browserify/readme.md

@@ -2,7 +2,7 @@
 
 ## Installation/Usage:
 
-To try this example, follow these 4 simple steps. 
+To try this example, follow these 4 simple steps.
 
 **Step 1**: Clone this entire repo
 ```bash
@@ -41,49 +41,88 @@ var watchify    = require('watchify');
 var exorcist    = require('exorcist');
 var browserify  = require('browserify');
 var browserSync = require('browser-sync').create();
-
-// Input file.
-watchify.args.debug = true;
-var bundler = watchify(browserify('./app/js/app.js', watchify.args));
-
-// Babel transform
-bundler.transform(babelify.configure({
-    sourceMapRelative: 'app/js'
-}));
-
-// On updates recompile
-bundler.on('update', bundle);
-
-function bundle() {
-
-    gutil.log('Compiling JS...');
-
-    return bundler.bundle()
-        .on('error', function (err) {
-            gutil.log(err.message);
-            browserSync.notify("Browserify Error!");
-            this.emit("end");
-        })
-        .pipe(exorcist('app/js/dist/bundle.js.map'))
-        .pipe(source('bundle.js'))
-        .pipe(gulp.dest('./app/js/dist'))
-        .pipe(browserSync.stream({once: true}));
-}
+var glob        = require('glob');
+var path        = require('path');
+var mkdirp      = require('mkdirp');
+var mergeStream = require('merge-stream');
+var through     = require('through2');
+
+var mkdir = function (dir, opts) {
+    return through.obj(function (file, enc, cb) {
+        mkdirp(dir, opts, function (err, made) {
+            if (err) {
+                cb(new gutil.PluginError('gulp-mkdirp', err), file);
+                return;
+            }
+            cb(null, file);
+        });
+    });
+};
 
 /**
- * Gulp task alias
+ * Creating multiple bundles with watchify
  */
-gulp.task('bundle', function () {
-    return bundle();
+gulp.task('bundle', function (done) {
+    glob('./app/js/{app.js,worker/worker.js}', function (err, files) {
+        if (err) {
+            done(err);
+            return;
+        }
+
+        var tasks = files.map(function (entry) {
+            var relative = path.relative('./app/js', entry);
+            var sourceMapPath = './app/js/dist/' + relative + '.map';
+
+            // Input file.
+            watchify.args.debug = true;
+            var bundler = watchify(browserify(entry, watchify.args));
+
+            // Babel transform
+            bundler.transform(babelify.configure({
+                sourceMapRelative: 'app/js'
+            }));
+
+            var bundle = function () {
+                gutil.log('Compiling ' + entry + '...');
+
+                return bundler.bundle()
+                    .on('error', function (err) {
+                        gutil.log(err.message);
+                        browserSync.notify('Browserify Error!');
+                        this.emit('end');
+                    })
+                    // The mkdir() below is a workaround for an exorcist issue,
+                    // where exorcist fails silently when the output dir does not exist
+                    // see https://github.com/thlorenz/exorcist/issues/18
+                    // and https://github.com/thlorenz/exorcist/pull/19
+                    .pipe(mkdir(path.dirname(sourceMapPath)))
+                    .pipe(exorcist(sourceMapPath))
+                    .pipe(source(relative))
+                    .pipe(gulp.dest('./app/js/dist'))
+                    .pipe(browserSync.stream({once: true}));
+            }
+
+            // On updates recompile
+            bundler.on('update', bundle);
+
+            return bundle();
+        });
+
+        // The resume() below fixes an issue in orchestrator,
+        // where the merged stream does not trigger end event
+        // see https://github.com/grncdr/merge-stream/issues/6
+        // and https://github.com/orchestrator/orchestrator/issues/48
+        mergeStream(tasks).resume().on('end', done);
+    });
 });
 
 /**
  * First bundle, then serve from the ./app directory
  */
 gulp.task('default', ['bundle'], function () {
     browserSync.init({
-        server: "./app"
+        server: './app'
     });
 });
-```
 
+```