日々の技術日記

Web系の技術とか日常とかゲームとかをつらつらと

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

※再掲【この記事はQiitaにも掲載しています】

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で書いたファイルを読み込みます。

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

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

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に設定します。

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

gulp-task: build

require! \run-sequence

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

gulp-task: browserify

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

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

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

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

gulp-task: watchify

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が上手く動いてくれないのでここは要調査です。