LoginSignup
166

More than 5 years have passed since last update.

Watchifyでbrowserifyを差分ビルド

Last updated at Posted at 2015-03-16

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
166