Skip to content

Instantly share code, notes, and snippets.

@cblavier
Created April 3, 2015 12:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cblavier/887346babc2ff173dfaf to your computer and use it in GitHub Desktop.
Save cblavier/887346babc2ff173dfaf to your computer and use it in GitHub Desktop.
Coffee + CJSX compilation with Gulp / Browserify / Watchify
gulp = require('gulp')
uglify = require('gulp-uglify')
gulpif = require('gulp-if')
reload = require('./watch').reload
source = require('vinyl-source-stream')
streamify = require('gulp-streamify')
bundle_dir = "./public/"
vendor_dir = "./node_modules/"
src_dir = "./assets/javascripts/"
main_js_file = "#{src_dir}/app.coffee"
libs = [
'underscore',
'react',
'react-bootstrap/dist/react-bootstrap'
]
build = false
bundler = (options) ->
browserify = require('browserify')
browserifyer = browserify(
cache: {}
packageCache: {}
paths: [src_dir, vendor_dir]
fullPaths: !build
extensions: ['.coffee', '.cjsx']
entries: options.entries
debug: !build
)
options.required_libs?.forEach (lib) -> browserifyer.require(lib)
options.external_libs?.forEach (lib) -> browserifyer.external(lib)
browserifyer.transform({}, 'coffee-reactify')
browserifyer
bundleWith = (bundler, bundle_name) ->
bundler.bundle()
.on 'error', (error) ->
console.log(error.toString())
@emit('end')
.pipe(source("#{bundle_name}.js"))
.pipe gulpif(build, streamify(uglify()))
.pipe gulp.dest bundle_dir
.pipe gulpif(!build, reload())
watchBundle = (bundler, bundle_name) ->
watchify = require('watchify')
watchifyer = watchify(bundler)
watchifyer.on 'update', -> bundleWith(bundler, bundle_name)
bundleWith(bundler, bundle_name)
appBundler = vendorBundler = undefined
gulp.task 'set_script_build_mode', -> build = true
gulp.task 'set_bundlers', ->
appBundler = bundler(external_libs: libs, entries: main_js_file)
vendorBundler = bundler(required_libs: libs)
gulp.task 'watch_app_scripts', ['set_bundlers'], -> watchBundle(appBundler, 'app')
gulp.task 'watch_vendor_scripts', ['set_bundlers'], -> watchBundle(vendorBundler, 'vendor')
gulp.task 'build_app_scripts', ['set_script_build_mode', 'set_bundlers'], -> bundleWith(appBundler, 'app')
gulp.task 'build_vendor_scripts', ['set_script_build_mode', 'set_bundlers'], -> bundleWith(vendorBundler, 'vendor')
gulp.task 'build_scripts', ['build_app_scripts', 'build_vendor_scripts',]
gulp.task 'watch_scripts', ['watch_app_scripts', 'watch_vendor_scripts']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment