I use this browserify task to bundle my javascript:
gulp.task('browserify', function(done) {
var files = globby.sync(local.jsBundles);
return merge(files.map(function(file) {
return browserify({
entries: file,
debug: true
}).transform(babelify, {presets: ["env", "react"]})
.bundle()
.on('error', function(e) {
console.log(gutil.colors.bgBlack('[Error while bundling]'));
console.log(gutil.colors.gray(e.message));
this.emit('end');
})
.pipe(source(path.basename(file, '.js') + '.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(local.jsDist + '/bundles'))
})).on('end', done);
});
This works very well for me; But it takes about 18 seconds to finish, even though I am only bundling 6 files. I realize that browserify also follows the imports from the react packages. Several solutions I could find suggested working with watchify, but I couldn't get it to work on my task. Could anyone help me with this and tell what I am doing wrong here?