gulpとBrowserifyでJSをビルドしてみた

はじめに

gulpとBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。

gulpについて

Node.jsのstreamを活用したビルドシステム、ということらしい。
Streamのおかげでビルドフローをとても直感的に記述できると感じた。
他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。

Browserifyについて

node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。
JSのモジュール化というと、最近はwebpackというのもあるらしい。

基本

gulpfile.coffee

gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.js']
    .bundle()
    .pipe source 'bundle.js'
    .pipe gulp.dest 'build'

gulp.task 'default', ['build']

• Browserify結果のReadable streamをbundle()で得る
• vinyl-source-streamで普通のstreamからgulpのstreamに
• gulp.destでディレクトリに突っ込む

gulp-browserifyというgulpでBrowserifyを扱うプラグインもあるが、gulp公式的には非推奨らしく、browserifyを直接使ったほうが良さそう。

ソースにCoffeeScriptを使う

gulpfile.coffee

gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe gulp.dest 'build'

• .transform 'coffeeify'で、coffeeifyというCoffeeScriptサポートを追加するBrowserify用のプラグインを指定
  • 入力にCoffeeScriptが使えるようになる。
• browserify-shimなどの他のプラグインも同様に使える。

Uglifyを使ってminify

gulpfile.coffee

gulp = require 'gulp'
source = require 'vinyl-source-stream'
buffer = require 'vinyl-buffer'
browserify = require 'browserify'
uglify = require 'gulp-uglify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe buffer()
    .pipe uglify()
    .pipe gulp.dest 'build'

• さっきの出力結果にgulp-uglifyをpipe

これとは別に、Browserifyのプラグイン (uglifyify)を使ってuglifyする方法もあるようだ。

Source maps を出力する

gulpfile.coffee

gulp = require 'gulp'
source = require 'vinyl-source-stream'
buffer = require 'vinyl-buffer'
browserify = require 'browserify'
uglify = require 'gulp-uglify'
sourcemaps = require 'gulp-sourcemaps'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
      debug: true
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe buffer()
    .pipe sourcemaps.init
      loadMaps: true
    .pipe uglify()
    .pipe sourcemaps.write()
    .pipe gulp.dest 'build'

gulp.task 'watch', ->
  gulp.watch path, ['compile']

gulp.task 'default', ['compile']

• 最初のbrowserifyにdebug: trueを指定
  • これでBrowserifyの出力にはsource mapsがコメントとして含まれるようになる
• sourcemaps.initでloadMaps: trueを指定
  • 使っているのはgulp-sourcemapsというプラグインで、gulp中の処理(uglifyなど)のsource mapを生成してくれる
  • loadMaps: trueでBrowserifyの出力の中のsource mapを拾う
• sourcemaps.write()でsource mapsをコメントとして出力
  • 引数を指定すると別ファイルにもできる

追記

watchifyで監視・インクリメンタルビルド

watchifyを使うと、ファイルを監視してインクリメンタルなbrowserifyビルドを行うことができる。
特に大きなプロジェクトになると全体を毎回ビルドし直すより圧倒的に速いので捗る。

gulpと組み合わせる方法の参考: https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md