Skip to content

Instantly share code, notes, and snippets.

@kyohei8
Last active June 25, 2017 01:26
Show Gist options
  • Save kyohei8/097b859efeb5bfddcd2d to your computer and use it in GitHub Desktop.
Save kyohei8/097b859efeb5bfddcd2d to your computer and use it in GitHub Desktop.
gulp with browserify/watchify multiple file compile task

usage

only browserify

$ gulp browserify

use watch

# add watch tasks
gulp.task 'watch', ['setWatch', 'browserify'], ->
  # ...

then

$ gulp watch
gulp = require 'gulp'
browserify = require 'browserify'
watchify = require 'watchify'
source = require 'vinyl-source-stream'
colors = require 'colors'
files = [
{
input : ['./src/scripts/main.coffee']
output : 'main.js'
extensions : ['.coffee']
destination: './app/scripts/'
}
{
input : ['./src/scripts/profile.coffee']
output : 'profile.js'
extensions : ['.coffee']
destination: './app/scripts/'
}
]
createBundle = (options) ->
bundleMethod = if global.isWatching then watchify else browserify
bundler = bundleMethod
entries : options.input
extensions: options.extensions
rebundle = ->
startTime = new Date().getTime()
bundler.bundle
debug: true
.on 'error', ->
console.log arguments
.pipe(source(options.output))
.pipe gulp.dest(options.destination)
.on 'end', ->
time = (new Date().getTime() - startTime) / 1000
console.log "#{options.output.cyan} was browserified: #{(time + 's').magenta}"
if global.isWatching
bundler.on 'update', rebundle
rebundle()
createBundles = (bundles) ->
bundles.forEach (bundle) ->
createBundle
input : bundle.input
output : bundle.output
extensions : bundle.extensions
destination: bundle.destination
gulp.task 'browserify', ->
createBundles files
gulp = require 'gulp'
gulp.task 'setWatch', ->
global.isWatching = true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment