Watchifyでbrowserifyを差分ビルド

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 を使った。

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

examplesが参考になる

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']