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,69 @@ 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 eventStream = require('event-stream');
 
-// Input file.
-watchify.args.debug = true;
-var bundler = watchify(browserify('./app/js/app.js', watchify.args));
+/**
+ * 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);
+        }
 
-// Babel transform
-bundler.transform(babelify.configure({
-    sourceMapRelative: 'app/js'
-}));
+        var tasks = files.map(function (entry) {
+            var relative = path.relative('./app/js', entry);
 
-// On updates recompile
-bundler.on('update', bundle);
+            // A workaround for 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
+            var sourceMapPath = './app/js/dist/' + relative + '.map';
+            mkdirp.sync(path.dirname(sourceMapPath));
 
-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');
+                    })
+                    .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();
+        });
+
+        eventStream.merge(tasks).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,15 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "exorcist": "^0.4.0",
     "babelify": "^6.1.2",
     "browser-sync": "^2.2.1",
     "browserify": "^8.1.3",
+    "event-stream": "^3.3.1",
+    "exorcist": "^0.4.0",
+    "glob": "^5.0.14",
     "gulp": "^3.8.11",
     "gulp-util": "^3.0.3",
+    "mkdirp": "^0.5.1",
     "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,71 @@ 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 eventStream = require('event-stream');
 
 /**
- * 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);
+        }
+
+        var tasks = files.map(function (entry) {
+            var relative = path.relative('./app/js', entry);
+
+            // A workaround for 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
+            var sourceMapPath = './app/js/dist/' + relative + '.map';
+            mkdirp.sync(path.dirname(sourceMapPath));
+
+            // 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');
+                    })
+                    .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();
+        });
+
+        eventStream.merge(tasks).on('end', done);
+    });
 });
 
 /**
  * First bundle, then serve from the ./app directory
  */
 gulp.task('default', ['bundle'], function () {
     browserSync.init({
-        server: "./app"
+        server: './app'
     });
 });
-```
 
+```