gulp+browserifyで環境構築、watchify導入まで

gulpとbrowserifyを使って、livescriptでの開発環境構築をしたので構成などを書いていきます。
また、gulpのタスクなどはlivescriptを使って書いていきます。
ほぼ同じやり方で他のAltJSでも応用することが出来ます。

Directory structure

.
├── gulpfile.js
├── build
├── src
└── gulp
    ├── browserify.ls
    ├── build.ls
    ├── default.ls
    ├── index.ls
    ├── uglify.ls
    ├── watch.ls
    └── watchify.ls

Installed node modules

npm i -D modules

• livescript
• prelude-ls
• gulp
• gulp-plumber
• gulp-rename
• gulp-uglify
• gulp-util
• browserify
• browserify-livescript
• watchify
• colors
• run-sequence
• vinyl-source-stream

gulpfile

gulpfile.jsからAltJSで書いたファイルを読み込みます。

gulpfile.js

require("livescript");
require("./gulp/index.ls");

index.lsからgulpディレクトリ内にあるファイルを一括で読み込みます。
また、ファイルはタスク毎に分割していきます。

gulp/index.ls

require! <[gulp fs]>
global <<< require \prelude-ls

fs.readdir-sync __dirname
|> filter ( .match /\.ls$/)
|> reject ( .match /index/)
|> each ->
  (require "#__dirname/#it") gulp

gulp-task: default

デフォルトタスクはgulp buildに設定します。

default.ls

module.exports = (gulp)->
  gulp.task \default, <[build]>

gulp-task: build

build.ls

require! \run-sequence

module.exports = (gulp)->
  gulp.task \build, (cb)->
    run-sequence \browserify, \uglify, cb

gulp-task: browserify

watchify導入にあたりタスクの共通化も考えましたが、いい感じに書けなかったので別ファイルで書いています。
似たようなことを書いているので出来れば共通化したい。。

gulp/browserify.ls

require! <[browserify colors]>
source = require \vinyl-source-stream

module.exports = (gulp)->
  gulp.task \browserify, (cb)->
    browserify do
      entries: <[./src/embed/index.ls]>
      extensions: <[ls js]>
    .transform \browserify-livescript
    .bundle!
    .on \error, -> process.stderr.write it.to-string!.white.bg-red; @emit \end
    .pipe source \embed.js
    .pipe gulp.dest \build/

gulp-task: uglify

gulp/uglify.ls

require! <[gulp-uglify gulp-rename]>

module.exports = (gulp)->
  gulp.task \uglify, (cb)->
    gulp
      .src \build/embed.js
      .pipe gulp-uglify!
      .pipe gulp-rename extname: \.min.js
      .pipe gulp.dest \build/

gulp-task: watch

gulp/watch.ls

module.exports = (gulp)->
  gulp.task \watch, (cb)->
    gulp.watch \./src/**/*.ls, <[watchify]>

gulp-task: watchify

gulp/watchify.ls

require! <[browserify watchify colors gulp-util gulp-plumber]>
source = require \vinyl-source-stream

module.exports = (gulp)->
  gulp.task \watchify, (cb)->
  	ops =
  	  entries: <[./src/embed/index.ls]>
  	  extensions: <[ls js]>
  	  cache: {}
  	  package-cache: {}
    bundler = browserify ops |> watchify
      ..transform \browserify-livescript
    bundle = ->
      bundler
        .bundle!
        .on \error, -> process.stderr.write it.to-string!.white.bg-red; @emit \end
        .pipe gulp-plumber!
        .pipe source \embed.js
        .pipe gulp.dest \build/
    bundler
      ..on \update, bundle
      ..on \log, gulp-util.log
    return bundle!

まとめ

browserify + watchifyを導入できたので、ビルドがかなり早くなりました。
ただ、書き方が悪いのかたまにwatchifyが上手く動いてくれないのでここは要調査です。

追記

2016/02/29　watchifyでtransformする場所を修正