Multiple Bundles With Gulp, Browserify, and React
[
{...},
"devDependencies": {
"babel-cli": "^6.4.5",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"event-stream": "^3.3.2",
"gulp": "~3.9.0",
"gulp-util": "^3.0.7",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0"
},
{...}
]
gulp = require "gulp"
babelify = require "babelify"
browserify = require "browserify"
es = require "event-stream"
rename = require "gulp-rename"
source = require "vinyl-source-stream"
transform = require "vinyl-transform"
gutil = require "gulp-util"
bundleScripts = (files) ->
tasks = files.map (entry) ->
browserify({ entries: [entry] })
.transform(babelify, {presets: ['react', 'es2015', 'stage-0']})
.bundle().on('error', (err) ->
gutil.log(err.message)
this.emit 'end'
)
.pipe(source(entry))
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('./'))
es.merge.apply(null, tasks)
gulp.task 'scripts', () ->
files = [
"path/to/main.js"
]
bundleScripts(files)