フロントエンドのビルドツール、Grunt以外の選択肢

フロントエンドのビルドツールというとGruntが
デファクトスタンダードになっている感ありますが、
それ以外の選択肢って何があるかなという話です。

Gulp

Gulpはストリーミング式のビルドツールです。
設定はgulpfileに記述します。

gulp = require 'gulp'
coffee = require 'gulp-coffee'
concat = require 'gulp-concat'
uglify = require 'gulp-uglify'

gulp.task 'compile', ->
  gulp.src('./src/*.coffee')
    .pipe(coffee())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))

記述方法はGruntと違い、このようにgulp.src()が返すstreamオブジェクトから
処理をメソッドチェインで繋げていきます。
上の例だと

# ファイル読み込んで
gulp.src('./src/*.coffee')
  # coffeeからコンパイルして
  .pipe(coffee())
  # concatして
  .pipe(concat('all.js'))
  # 圧縮して
  .pipe(uglify())
  # ./dist/以下に出力
  .pipe(gulp.dest('./dist/'))

といった感じの流れになります。
pipeで生成物をそのまま次の処理に渡して行くため、
このようなケースではGruntよりシンプルにタスクを定義する事ができます。
またwatchタスクは標準機能として備えているためその為のプラグイン等は不要です。

gulp.task 'watch', ->
  gulp.watch './src/*.coffee', (event) ->
    console.log "#{event.path}: #{event.type}"
    gulp.run 'compile'

複数のタスクを実行するタスクはGruntと同じような書き方で定義できますが、

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

Gruntと違いこの順番に同期的に実行される訳ではなく、
順序が保証されてないため注意が必要です。
そうしたい場合はcallbackやdeferred等で
ごにょごにょやらないといけないのが少し面倒ですね。

プラグインは現在約180ほどの登録があり、
各種コンパイラやlint、テストランナーは一通り揃っているようです。

Brunch

Brunchは

Brunch is an ultra-fast HTML5 build tool

とされていますが、ビルド以外にも
scaffoldやローカルサーバの立ち上げといった機能があり
Grunt + yoと言った方が近いかもしれません。

# 指定したBrunch skeltonからプロジェクトの雛形を作成
$ brunch new skelton-url
# wach + ローカルサーバの立ち上げ
$ brunch w -s
# ビルド
$ brunch build

多くのskeltonは一緒にテスト環境も用意してくれるので、
例えばBrunch with Marionetteならlocalhost:3333/testにアクセスすれば
そのままブラウザ上でmochaによるテストを実行する事ができます。

Gulp同様、プラグインやボイラープレートとなるskeltonは一通り揃っています。
skeltonはやはりChaplinやAngularなどMVCフレームワークのものが人気なようです。

まとめ

プラグインの充実度やコミュニティの活発さでは
Gruntがまだまだ強いと思いますが、
SPAなんかでフロントとサーバが疎結合になっていたりする場合は
ローカルサーバの立ち上げからビルドまでやってくれるBrunch、
小規模なプロジェクトで設定ファイルをシンプルに書きたいなら
Gulpと、それぞれビルドツールの選択肢に加えてみるのも良いんじゃないでしょうか。