Skip to content

Commit ccd5e89

Browse files
chrisxue815chrisxue815
committed
Add glob support to recipe gulp.browserify
1 parent 2c4c04d commit ccd5e89

6 files changed

Lines changed: 115 additions & 66 deletions

File tree

‎recipes/gulp.browserify/app/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ <h1>Browsersync Browserify Example</h1>
1010

1111
<div id="example"></div>
1212

13-
<script src="js/dist/bundle.js"></script>
13+
<script src="js/dist/app.js"></script>
14+
<script src="js/dist/worker/worker.js"></script>
1415
</body>
1516
</html>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
let app = 'awesome';
1+
let app = 'awesome';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
const worker = 'brilliant';

‎recipes/gulp.browserify/gulpfile.js‎

Lines changed: 51 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,69 @@ var watchify = require('watchify');
66
var exorcist = require('exorcist');
77
var browserify = require('browserify');
88
var browserSync = require('browser-sync').create();
9+
var glob = require('glob');
10+
var path = require('path');
11+
var mkdirp = require('mkdirp');
12+
var eventStream = require('event-stream');
913

10-
// Input file.
11-
watchify.args.debug = true;
12-
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
14+
/**
15+
* Creating multiple bundles with Watchify
16+
*/
17+
gulp.task('bundle', function (done) {
18+
glob('./app/js/{app.js,worker/worker.js}', {}, function (err, files) {
19+
if (err) {
20+
done(err);
21+
}
1322

14-
// Babel transform
15-
bundler.transform(babelify.configure({
16-
sourceMapRelative: 'app/js'
17-
}));
23+
var tasks = files.map(function (entry) {
24+
var relative = path.relative('./app/js', entry);
1825

19-
// On updates recompile
20-
bundler.on('update', bundle);
26+
// A workaround for exorcist issue,
27+
// where exorcist fails silently when the output dir does not exist
28+
// see https://github.com/thlorenz/exorcist/issues/18
29+
// and https://github.com/thlorenz/exorcist/pull/19
30+
var sourceMapPath = './app/js/dist/' + relative + '.map';
31+
mkdirp.sync(path.dirname(sourceMapPath));
2132

22-
function bundle() {
33+
// Input file.
34+
watchify.args.debug = true;
35+
var bundler = watchify(browserify(entry, watchify.args));
2336

24-
gutil.log('Compiling JS...');
37+
// Babel transform
38+
bundler.transform(babelify.configure({
39+
sourceMapRelative: 'app/js'
40+
}));
2541

26-
return bundler.bundle()
27-
.on('error', function (err) {
28-
gutil.log(err.message);
29-
browserSync.notify("Browserify Error!");
30-
this.emit("end");
31-
})
32-
.pipe(exorcist('app/js/dist/bundle.js.map'))
33-
.pipe(source('bundle.js'))
34-
.pipe(gulp.dest('./app/js/dist'))
35-
.pipe(browserSync.stream({once: true}));
36-
}
42+
var bundle = function () {
43+
gutil.log('Compiling ' + entry + '...');
3744

38-
/**
39-
* Gulp task alias
40-
*/
41-
gulp.task('bundle', function () {
42-
return bundle();
45+
return bundler.bundle()
46+
.on('error', function (err) {
47+
gutil.log(err.message);
48+
browserSync.notify('Browserify Error!');
49+
this.emit('end');
50+
})
51+
.pipe(exorcist(sourceMapPath))
52+
.pipe(source(relative))
53+
.pipe(gulp.dest('./app/js/dist'))
54+
.pipe(browserSync.stream({once: true}));
55+
}
56+
57+
// On updates recompile
58+
bundler.on('update', bundle);
59+
60+
return bundle();
61+
});
62+
63+
eventStream.merge(tasks).on('end', done);
64+
});
4365
});
4466

4567
/**
4668
* First bundle, then serve from the ./app directory
4769
*/
4870
gulp.task('default', ['bundle'], function () {
4971
browserSync.init({
50-
server: "./app"
72+
server: './app'
5173
});
52-
});
74+
});

‎recipes/gulp.browserify/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@
88
},
99
"license": "MIT",
1010
"devDependencies": {
11-
"exorcist": "^0.4.0",
1211
"babelify": "^6.1.2",
1312
"browser-sync": "^2.2.1",
1413
"browserify": "^8.1.3",
14+
"event-stream": "^3.3.1",
15+
"exorcist": "^0.4.0",
16+
"glob": "^5.0.14",
1517
"gulp": "^3.8.11",
1618
"gulp-util": "^3.0.3",
19+
"mkdirp": "^0.5.1",
1720
"vinyl-source-stream": "^1.0.0",
1821
"watchify": "^2.3.0"
1922
}

‎recipes/gulp.browserify/readme.md‎

Lines changed: 56 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Installation/Usage:
44

5-
To try this example, follow these 4 simple steps.
5+
To try this example, follow these 4 simple steps.
66

77
**Step 1**: Clone this entire repo
88
```bash
@@ -41,49 +41,71 @@ var watchify = require('watchify');
4141
var exorcist = require('exorcist');
4242
var browserify = require('browserify');
4343
var browserSync = require('browser-sync').create();
44-
45-
// Input file.
46-
watchify.args.debug = true;
47-
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
48-
49-
// Babel transform
50-
bundler.transform(babelify.configure({
51-
sourceMapRelative: 'app/js'
52-
}));
53-
54-
// On updates recompile
55-
bundler.on('update', bundle);
56-
57-
function bundle() {
58-
59-
gutil.log('Compiling JS...');
60-
61-
return bundler.bundle()
62-
.on('error', function (err) {
63-
gutil.log(err.message);
64-
browserSync.notify("Browserify Error!");
65-
this.emit("end");
66-
})
67-
.pipe(exorcist('app/js/dist/bundle.js.map'))
68-
.pipe(source('bundle.js'))
69-
.pipe(gulp.dest('./app/js/dist'))
70-
.pipe(browserSync.stream({once: true}));
71-
}
44+
var glob = require('glob');
45+
var path = require('path');
46+
var mkdirp = require('mkdirp');
47+
var eventStream = require('event-stream');
7248

7349
/**
74-
* Gulp task alias
50+
* Creating multiple bundles with Watchify
7551
*/
76-
gulp.task('bundle', function () {
77-
return bundle();
52+
gulp.task('bundle', function (done) {
53+
glob('./app/js/{app.js,worker/worker.js}', {}, function (err, files) {
54+
if (err) {
55+
done(err);
56+
}
57+
58+
var tasks = files.map(function (entry) {
59+
var relative = path.relative('./app/js', entry);
60+
61+
// A workaround for exorcist issue,
62+
// where exorcist fails silently when the output dir does not exist
63+
// see https://github.com/thlorenz/exorcist/issues/18
64+
// and https://github.com/thlorenz/exorcist/pull/19
65+
var sourceMapPath = './app/js/dist/' + relative + '.map';
66+
mkdirp.sync(path.dirname(sourceMapPath));
67+
68+
// Input file.
69+
watchify.args.debug = true;
70+
var bundler = watchify(browserify(entry, watchify.args));
71+
72+
// Babel transform
73+
bundler.transform(babelify.configure({
74+
sourceMapRelative: 'app/js'
75+
}));
76+
77+
var bundle = function () {
78+
gutil.log('Compiling ' + entry + '...');
79+
80+
return bundler.bundle()
81+
.on('error', function (err) {
82+
gutil.log(err.message);
83+
browserSync.notify('Browserify Error!');
84+
this.emit('end');
85+
})
86+
.pipe(exorcist(sourceMapPath))
87+
.pipe(source(relative))
88+
.pipe(gulp.dest('./app/js/dist'))
89+
.pipe(browserSync.stream({once: true}));
90+
}
91+
92+
// On updates recompile
93+
bundler.on('update', bundle);
94+
95+
return bundle();
96+
});
97+
98+
eventStream.merge(tasks).on('end', done);
99+
});
78100
});
79101

80102
/**
81103
* First bundle, then serve from the ./app directory
82104
*/
83105
gulp.task('default', ['bundle'], function () {
84106
browserSync.init({
85-
server: "./app"
107+
server: './app'
86108
});
87109
});
88-
```
89110

111+
```

0 commit comments

Comments
 (0)