Browserify の使い方を調べつつ、CoffeeScript ファイル更新を監視する Gulp タスクめも

目的

Browserify を使って Coffee を監視する Gulp タスクを整理。

TODO: ひとまず動くものを貼り付け。後で整理する。

ファイル構成 (JS 関連のファイルのみ)

src/coffee の coffee ファイルを監視し、 dist/js にコンパイルする。

.
|-- dist
|   `-- js
|       |-- main.js
|       `-- index.js
|-- gulpfile.coffee
|-- package.json
|-- src
|   `-- coffee
|       |-- main.coffee
|       `-- index.coffee

coffee ファイル。bower でインストールしてきたライブラリや自作コードのファイル名を宣言することで browserify が結合してくれる：）

例: coffee ファイルに外部ファイル読み込み

main.coffee

$      = require 'jquery'
_      = require 'underscore'
moment = require 'moment'

Foo    = require './Foo'
bar    = require './bar'

# つかう
foo = new Foo()
bar = bar()

Foo.coffee

class Foo
   # code

module.exports = Foo

bar.coffee

module.exports = ->
  bar = ->
    # code
  return bar

HTML に読み込むのはこの 1 ファイルのみで済む：）

index.html

<script src="js/main.js" ></script>

browserify と watchify のタスク

gulpfile.coffee

gulpfile.coffee

_           = require 'lodash'
gulp        = require 'gulp'
plumber     = require 'gulp-plumber'
browserify  = require 'browserify'
source      = require 'vinyl-source-stream'
streamify   = require 'gulp-streamify'
watchify    = require 'watchify'


DIST_DIR = './dist'
COFFEE_FILE = ['main', 'index']


gulp.task 'browserify', ->
  _.each COFFEE_FILE, (fileName) ->
    browserify
      entries: ["./src/coffee/#{fileName}.coffee"]
      extensions: ['.coffee']
      transform: ['coffeeify', 'debowerify']
    .bundle()
    .pipe source("#{fileName}.js")
    .pipe streamify(uglify({mangle: false}))
    .pipe gulp.dest(DIST_DIR + '/js')


gulp.task 'watchify', ->
  _.each COFFEE_FILE, (fileName) ->
    bundler = watchify
      entries: ["./src/coffee/#{fileName}.coffee"]
      extensions: ['.coffee']
    rebundle = (fileName) ->
      util.log("'#{fileName}.coffee' has changed.")
      bundler.bundle(debug: true)
        .on 'error', (err) -> util.log('Browserify Error:', err)
        .pipe plumber()
        .pipe source "#{fileName}.js"
        .pipe gulp.dest(DIST_DIR + '/js')
        .pipe connect.reload()
    bundler.on 'update', -> rebundle(fileName)
    return rebundle(fileName)

package.json に Browserify の設定を追記しておく

package.json

//
  "browserify": {
    "transform": [
      "coffeeify",
      "debowerify"
    ]
  },
  "dependencies": {
    "gulp": "~3.8.6",
    "gulp-plumber": "~0.6.4",
    "gulp-coffee": "~2.1.1",
    "run-sequence": "~0.3.6",
    "vinyl-source-stream": "~0.1.1",
    "gulp-util": "~3.0.0",
    "watchify": "~0.10.2",
    "browserify": "~4.2.3",
    "lodash": "~2.4.1",
    "coffee-script": "~1.7.1",
    "gulp-browserify": "~0.5.0",
    "gulp-streamify": "0.0.5",
    "coffeeify": "~0.7.0",
    "debowerify": "~0.8.1"
  }
//

実行

$ gulp --require coffee-script browserify
$ gulp --require coffee-script watchify

browserify のオプションまだまだ使いこなせていないので、調べて更新します:D