Gulp(React.js+Browserify)でyak shaving

人間の欲は深いのでyak shavingが生じます。その例です。

yak shavingしてるので最終形態をはじめにのせておきます、目次だけ見てこちらを参考にするのもいいかもしれません。

Gulp, browserify, reactify, coffee-reactify, notify and watchify for coffeescript

ディレクトリ構成

package.json
build/
  - app.js
src/
  - app.coffee
  - foo.coffe
  - bar.coffe 

Browserify + React.js

シンプルな例です。

$ npm install react browserify reactify vinyl-source-stream -save

gulpfile.coffee

ulp = require('gulp')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    return browserify
            entries: './src/app.js'
            transform: ['reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

• Gulp + Browserify: The Everything Post | Viget

CoffeeScriptで書きたいです

Javascriptではなく、CoffeeScriptが使いたいです。

$ npm install coffee-reactify coffee-script

gulpfile.coffee

gulp = require('gulp')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    return browserify
            entries: './src/app.coffee'
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

• reactjs - Browserify: Can't seem to get reactify to work with coffeeify - Stack Overflow
• jsdf/coffee-reactify
• gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita

複数ファイルをBrowserifyしたいです

$ npm install glob -g

gulpfile.coffee

gulp = require('gulp')
glob = require('glob')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->                                                                                                                                                                       
    srcFiles = glob.sync('./src/*.coffee')
    return browserify
            entries: srcFiles
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

• automated tests - Browserify - multiple entry points - Stack Overflow

Watchしたいです

gulp-watchを使う方法です。

$ npm install gulp-watch -save

gulpfile.coffee

gulp = require('gulp')
glob = require('glob')
watch = require('gulp-watch')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    srcFiles = glob.sync('./src/*.coffee')
    return browserify
            entries: srcFiles
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

gulp.task 'watch', ->
    gulp.watch './src/*.coffee', ['default']

この場合だと、ビルドに失敗した場合、watchしてるnodeのプロセスが落ちてしまいます。以下の記事を参考にして修正するといいかもしれません。

この問題は、以下の"Notifyしたいです"でも解決しているので、好きな方を試してみてください。

browserifyでgulp-plumberが効かない時の対処方法 - Qiita

Notifyしたいです

gulp-watchを使ってもできますが、watchifyを使ってやります。今までのgulpfileはぶち壊します。

$ npm install gulp-notify gulp-util watchify

gulpfile.coffee

source = require 'vinyl-source-stream'
gulp = require 'gulp'
gutil = require 'gulp-util'
browserify = require 'browserify'
coffee_reactify = require 'coffee-reactify'
watchify = require 'watchify'
notify = require 'gulp-notify'
glob = require 'glob'

paths =
    srcFiles: glob.sync('./src/*.coffee')
    build: './build/'
    buildFile: 'bundle.js'


buildScript = (files, watch) ->
    rebundle = ->
        stream = bundler.bundle()
        stream.on("error", notify.onError(
            title: "Compile Error"
            message: "<%= error.message %>"
        )).pipe(source(paths.buildFile)).pipe gulp.dest(paths.build)

    props = watchify.args
    props.entries = files
    props.debug = true

    bundler = (if watch then watchify(browserify(props)) else browserify(props))
    bundler.transform coffee_reactify
    bundler.on "update", ->
        rebundle()
        gutil.log "Rebundled..."
        gutil.log paths.srcFiles
        return

    rebundle()


gulp.task "default", ->
    buildScript paths.srcFiles, false

gulp.task "watch", ["default"], ->
    buildScript paths.srcFiles, true

Error時

benrify!

Ref:

• Gulp, browserify, reactify, notify and watchify for coffeescript
• How to keep a fast build with Browserify and ReactJS | Avisi Blog
• gulpfile.js with browserify, reactify, watchify and gulp-notify.

まとめ

このように、React.jsを使ってなにか作りたいのに、gulpの設定で一日の大半が終わってしまいます。

まだ、concatとかほしいですね。

いい加減にしましょう。