gulpでbrowserify使ってcoffee-scriptの監視とコンパイル

まずnpmから必要な物をいれる。gulpで browserify/coffeeify を使ってビルドする場合、coffee-script も必要になる。

$ mkdir proj-path; cd proj-path
$ npm init
$ npm install --save-dev gulp gulp-browserify gulp-watch gulp-plumber gulp-rename coffeeify coffee-script

• gulp-rename リネームタスク
• gulp-watch 監視タスク
• gilp-plumber タスクの実行に失敗してもgulpを終了させないパイプ(watchでビルド失敗時に終了させない)
• gulp-browserify browserify

gulpfile.coffee

gulp       = require 'gulp'
browserify = require 'gulp-browserify'
rename     = require 'gulp-rename'
watch      = require 'gulp-watch'
plumber    = require 'gulp-plumber'

gulp.task 'coffee', ->
  gulp
    .src 'src/index.coffee', read: false
    .pipe plumber()
    .pipe browserify
      transform: ['coffeeify']
      extensions: ['.coffee']
      debug: true
    .pipe rename 'app.js'
    .pipe gulp.dest './public'

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

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

ディレクトリ構成はこう

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

実行

$ gulp # コンパイル
$ gulp watch # 監視開始

追記

gulp-browserifyはgulp公式的には規約違反でBlacklistedらしい。

Gulp + Browserify: The Everything Post | Viget

こうしろとのこと

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
     
gulp.task('browserify', function() {
    return browserify('./src/javascript/app.js')
        .bundle()
        //Pass desired output filename to vinyl-source-stream
        .pipe(source('bundle.js'))
        // Start piping stream to tasks!
        .pipe(gulp.dest('./build/'));
});