gruntからgulpに乗り換えることにした

久々にnodeを書くことがあり、grunt.jsじゃなくてgulp.jsを使ってみた結果gulpの方が圧倒的に良かったので、その素晴らしさの片鱗を味わってもらおうと思う。

jadeファイルをhtmlに変換するタスク

まず、src/jade ディレクトリにあるjadeファイルをhtmlに変換するタスクはこんな風に書ける。既にめっちゃ短い。

gulpfile.js

var gulp = require('gulp'),
    jade = require('gulp-jade');

gulp.task('jade', function () {
  gulp.src('src/jade/*.jade')      // gulp.src でファイルを指定
    .pipe(jade())                  // jade plugin に通して
    .pipe(gulp.dest('./static/'))  // gulp.dest で書きだす
});

gulp jade コマンドを実行するとタスクが走る。

watchする

重要なのはここ

ファイルを監視して変更があったら自動的にコンパイルするようにしたくなったとする。
gruntだと新しいタスクを追加してから既存のタスクと結合する、みたいなことを書かないといけないが、 gulpの場合、なんと実質 たった一行追加するだけ で完了する。

gulpfile.js

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    watch = require('gulp-watch'); // plugin 追加

gulp.task('jade', function () {
  gulp.src('src/jade/*.jade')
    .pipe(watch())  // ここを追加しただけ！
    .pipe(jade())
    .pipe(gulp.dest('./static/'))
});

直列に並んだタスクに新しいものを追加する場合は、今見たように .pipe() で追加したいタスクを間に挟み込めば完了する。いかにもUNIX的で分かりやすい。

Webサーバも立てる

では並列化したい場合はどうするかというと、 gulp.task の依存関係を使って記述する。例えば、さっきのjadeタスクと同時にWebサーバを起動したい場合

gulpfile.js

// サーバを起動するタスク
gulp.task('server', function () { /* .. */ });
// さっきのjadeタスク
gulp.task('jade',   function () { /* .. */ });

// server と jade を並列でつなぐ
gulp.task('default', ['server', 'jade']);

do one thing wellな機能をpipeで直列につなぎ、出来上がったタスクをさらに前後に並べることができる。もうgruntを使うのはやめることにする。