Multiple Bundles With Gulp, Browserify, and React

A.markdown

Multiple Bundles With Gulp, Browserify, and React

gulpfile.coffee

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)

package.json

[
  {...},
  "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"
  },
  {...}
]