browserify
watchify

Watchifyでbrowserifyを差分ビルド

More than 3 years have passed since last update.

https://github.com/maxogden/wzrd はアクセスする度に変更を吐き出すのだが、watchify は差分を管理してくれる。

reactとか無駄に巨大なんで、require('react') しただけで1.2秒ぐらい待たないといけなくなって辛かった。そういう問題を解決できる。


簡単な使い方

npm install -g watchify

$ watchify lib/index.js -o public/bundle.js -v

これだけ。-v で verboseみないと動いてるのかよくわからなかったので付けたほうがよさそう。

某アプリのビルドが3.8秒から0.3秒になって最高


自分の使い方

一旦すべてをjsにして吐き出す。


  • gulpで src/**/* -> lib/**/*.js

  • lib/index.js を基準にbrowserify する

gulp-watchify を使った。

https://github.com/marcello3d/gulp-watchify

arda-starter-project では毎度のビルドの遅さが問題になっていたので、watchifyを採用して高速になった。最高。

examplesが参考になる

https://github.com/marcello3d/gulp-watchify/blob/master/examples/simple/gulpfile.js


gulpfile.coffee

以下arda-starter-projectのgulpfile.coffeeです。

gulp   = require 'gulp'

shell = require 'gulp-shell'
coffee = require 'gulp-coffee'
sass = require 'gulp-sass'
jade = require 'gulp-react-jade'
watchify = require 'gulp-watchify'

gulp.task 'default', ['build']
gulp.task 'build', [
'build:ts'
'build:coffee'
'build:jade'
'build:css'
]

gulp.task 'build:ts', shell.task [
'$(npm bin)/tsc -d -m commonjs --preserveConstEnums -t es5 --sourceMap --outDir lib src/entry.ts'
]

gulp.task 'build:coffee', ->
gulp.src('src/**/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('lib'))

gulp.task 'build:jade', ->
gulp.src('src/**/*.jade')
.pipe jade()
.pipe(gulp.dest('lib'))

gulp.task 'build:css', ->
gulp
.src('src/styles/style.scss')
.pipe(sass())
.pipe(gulp.dest('public'))

gulp.task 'build:web', shell.task [
'$(npm bin)/browserify -o public/bundle.js lib/index.js'
]

watching = false
gulp.task 'enable-watch-mode', -> watching = true
gulp.task 'browserify', watchify (watchify) ->
gulp.src 'lib/index.js'
.pipe watchify
watch: watching
.pipe gulp.dest 'public/js/bundle.js'

gulp.task 'watchify', ['enable-watch-mode', 'browserify']
gulp.task 'watch', ['build', 'enable-watch-mode', 'watchify'], ->
gulp.watch 'src/**/*.coffee', ['build:coffee']
gulp.watch 'src/**/*.ts', ['build:ts']
gulp.watch 'src/**/*.jade', ['build:jade']
gulp.watch 'src/styles/**/*.scss', ['build:css']