From 2c4c04de7bee301b4a3a87b9bbee28e16116f91a Mon Sep 17 00:00:00 2001 From: Chris Xue Date: Wed, 12 Aug 2015 19:50:36 +0100 Subject: [PATCH 1/6] Add *.js.map to gitignore in gulp.browserify/app/js/dist --- recipes/gulp.browserify/app/js/dist/.gitignore | 3 ++- recipes/gulp.browserify/app/js/dist/bundle.js.map | 15 --------------- 2 files changed, 2 insertions(+), 16 deletions(-) delete mode 100644 recipes/gulp.browserify/app/js/dist/bundle.js.map diff --git a/recipes/gulp.browserify/app/js/dist/.gitignore b/recipes/gulp.browserify/app/js/dist/.gitignore index 4c43fe6..4e57eef 100644 --- a/recipes/gulp.browserify/app/js/dist/.gitignore +++ b/recipes/gulp.browserify/app/js/dist/.gitignore @@ -1 +1,2 @@ -*.js \ No newline at end of file +*.js +*.js.map diff --git a/recipes/gulp.browserify/app/js/dist/bundle.js.map b/recipes/gulp.browserify/app/js/dist/bundle.js.map deleted file mode 100644 index 40ba722..0000000 --- a/recipes/gulp.browserify/app/js/dist/bundle.js.map +++ /dev/null @@ -1,15 +0,0 @@ -{ - "version": 3, - "sources": [ - "node_modules/browserify/node_modules/browser-pack/_prelude.js", - "app.js" - ], - "names": [], - "mappings": "AAAA;;;ACAA,IAAI,GAAG,GAAG,SAAS,CAAC;AACpB,SAAS", - "file": "generated.js", - "sourceRoot": "", - "sourcesContent": [ - "(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o Date: Wed, 12 Aug 2015 18:53:23 +0100 Subject: [PATCH 2/6] Add glob support to recipe gulp.browserify --- recipes/gulp.browserify/app/index.html | 3 +- recipes/gulp.browserify/app/js/app.js | 2 +- .../gulp.browserify/app/js/worker/worker.js | 1 + recipes/gulp.browserify/gulpfile.js | 80 +++++++++++------ recipes/gulp.browserify/package.json | 5 +- recipes/gulp.browserify/readme.md | 90 ++++++++++++------- 6 files changed, 115 insertions(+), 66 deletions(-) create mode 100644 recipes/gulp.browserify/app/js/worker/worker.js diff --git a/recipes/gulp.browserify/app/index.html b/recipes/gulp.browserify/app/index.html index 9ec1d22..da89402 100644 --- a/recipes/gulp.browserify/app/index.html +++ b/recipes/gulp.browserify/app/index.html @@ -10,6 +10,7 @@

Browsersync Browserify Example

- + + diff --git a/recipes/gulp.browserify/app/js/app.js b/recipes/gulp.browserify/app/js/app.js index b7267ea..0b46287 100644 --- a/recipes/gulp.browserify/app/js/app.js +++ b/recipes/gulp.browserify/app/js/app.js @@ -1 +1 @@ -let app = 'awesome'; \ No newline at end of file +let app = 'awesome'; diff --git a/recipes/gulp.browserify/app/js/worker/worker.js b/recipes/gulp.browserify/app/js/worker/worker.js new file mode 100644 index 0000000..bf5631d --- /dev/null +++ b/recipes/gulp.browserify/app/js/worker/worker.js @@ -0,0 +1 @@ +const worker = 'brilliant'; diff --git a/recipes/gulp.browserify/gulpfile.js b/recipes/gulp.browserify/gulpfile.js index e57707f..da3e186 100644 --- a/recipes/gulp.browserify/gulpfile.js +++ b/recipes/gulp.browserify/gulpfile.js @@ -6,40 +6,62 @@ 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); + }); }); /** @@ -47,6 +69,6 @@ gulp.task('bundle', function () { */ gulp.task('default', ['bundle'], function () { browserSync.init({ - server: "./app" + server: './app' }); -}); \ No newline at end of file +}); diff --git a/recipes/gulp.browserify/package.json b/recipes/gulp.browserify/package.json index d1d26c7..a2adbbc 100644 --- a/recipes/gulp.browserify/package.json +++ b/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" } diff --git a/recipes/gulp.browserify/readme.md b/recipes/gulp.browserify/readme.md index e13dd5b..d9429ba 100644 --- a/recipes/gulp.browserify/readme.md +++ b/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,40 +41,62 @@ 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); + }); }); /** @@ -82,8 +104,8 @@ gulp.task('bundle', function () { */ gulp.task('default', ['bundle'], function () { browserSync.init({ - server: "./app" + server: './app' }); }); -``` +``` From a7aea6775136c6cf2756fddff717f3ff41f7d1b7 Mon Sep 17 00:00:00 2001 From: Chris Xue Date: Thu, 13 Aug 2015 16:50:47 +0100 Subject: [PATCH 3/6] Replace event-stream with merge-stream --- recipes/gulp.browserify/gulpfile.js | 8 ++++++-- recipes/gulp.browserify/package.json | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/recipes/gulp.browserify/gulpfile.js b/recipes/gulp.browserify/gulpfile.js index da3e186..cc61e3c 100644 --- a/recipes/gulp.browserify/gulpfile.js +++ b/recipes/gulp.browserify/gulpfile.js @@ -9,7 +9,7 @@ var browserSync = require('browser-sync').create(); var glob = require('glob'); var path = require('path'); var mkdirp = require('mkdirp'); -var eventStream = require('event-stream'); +var mergeStream = require('merge-stream'); /** * Creating multiple bundles with Watchify @@ -60,7 +60,11 @@ gulp.task('bundle', function (done) { return bundle(); }); - eventStream.merge(tasks).on('end', done); + // 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); }); }); diff --git a/recipes/gulp.browserify/package.json b/recipes/gulp.browserify/package.json index a2adbbc..897002f 100644 --- a/recipes/gulp.browserify/package.json +++ b/recipes/gulp.browserify/package.json @@ -11,11 +11,11 @@ "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", + "merge-stream": "^1.0.0", "mkdirp": "^0.5.1", "vinyl-source-stream": "^1.0.0", "watchify": "^2.3.0" From 0f2b00f646994b14a9b95ad0fc671aa793c054b2 Mon Sep 17 00:00:00 2001 From: Chris Xue Date: Thu, 13 Aug 2015 16:52:54 +0100 Subject: [PATCH 4/6] Remove the empty paramter in glob() Watchify -> watchify --- recipes/gulp.browserify/gulpfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/recipes/gulp.browserify/gulpfile.js b/recipes/gulp.browserify/gulpfile.js index cc61e3c..e86a8bc 100644 --- a/recipes/gulp.browserify/gulpfile.js +++ b/recipes/gulp.browserify/gulpfile.js @@ -12,10 +12,10 @@ var mkdirp = require('mkdirp'); var mergeStream = require('merge-stream'); /** - * Creating multiple bundles with Watchify + * Creating multiple bundles with watchify */ gulp.task('bundle', function (done) { - glob('./app/js/{app.js,worker/worker.js}', {}, function (err, files) { + glob('./app/js/{app.js,worker/worker.js}', function (err, files) { if (err) { done(err); } From 2280dc5c75bc74a6fd15137c01871fac2ebb0197 Mon Sep 17 00:00:00 2001 From: Chris Xue Date: Thu, 13 Aug 2015 17:48:09 +0100 Subject: [PATCH 5/6] Use asynchronous mkdirp --- recipes/gulp.browserify/gulpfile.js | 25 +++++++++++++++++++------ recipes/gulp.browserify/package.json | 1 + 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/recipes/gulp.browserify/gulpfile.js b/recipes/gulp.browserify/gulpfile.js index e86a8bc..e54d09a 100644 --- a/recipes/gulp.browserify/gulpfile.js +++ b/recipes/gulp.browserify/gulpfile.js @@ -10,6 +10,19 @@ 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); + }); + }); +}; /** * Creating multiple bundles with watchify @@ -18,17 +31,12 @@ 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); - - // 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; @@ -48,6 +56,11 @@ gulp.task('bundle', function (done) { 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')) diff --git a/recipes/gulp.browserify/package.json b/recipes/gulp.browserify/package.json index 897002f..4e2a3a4 100644 --- a/recipes/gulp.browserify/package.json +++ b/recipes/gulp.browserify/package.json @@ -17,6 +17,7 @@ "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" } From 39fb969f4ce1cabbad40a5239c43a11d0d2a0350 Mon Sep 17 00:00:00 2001 From: Chris Xue Date: Thu, 13 Aug 2015 17:50:16 +0100 Subject: [PATCH 6/6] Update preview of gulpfile.js in readme.md --- recipes/gulp.browserify/readme.md | 37 ++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/recipes/gulp.browserify/readme.md b/recipes/gulp.browserify/readme.md index d9429ba..9f9c906 100644 --- a/recipes/gulp.browserify/readme.md +++ b/recipes/gulp.browserify/readme.md @@ -44,26 +44,34 @@ var browserSync = require('browser-sync').create(); var glob = require('glob'); var path = require('path'); var mkdirp = require('mkdirp'); -var eventStream = require('event-stream'); +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); + }); + }); +}; /** - * Creating multiple bundles with Watchify + * Creating multiple bundles with watchify */ gulp.task('bundle', function (done) { - glob('./app/js/{app.js,worker/worker.js}', {}, function (err, files) { + 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); - - // 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; @@ -83,6 +91,11 @@ gulp.task('bundle', function (done) { 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')) @@ -95,7 +108,11 @@ gulp.task('bundle', function (done) { return bundle(); }); - eventStream.merge(tasks).on('end', done); + // 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); }); });