Edited at

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

More than 3 years have passed since last update.


目的

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