こんにちはほそ道です。
前々回のGruntと前回のgulpにてそれぞれの基本構造を掘り下げてみたので
２つを対比した感想を述べてみたいと思います。
なお、ほそ道の独断と偏見により書き連ねて参りますので
いずれかのツールのファンの方はお気を悪くされないでくださいませ。
概念図から比較する
- Grunt
- gulp
結論、短時間での概念習得に関してはgulpの方が理解し易く、その気になればカスタマイズなども重くなく出来そうです。
gulpは手続型っぽくgulpコマンドのgulp.js内で何となくのシーケンスが把握できます。
図の単純な作成時間は「どうやってまとめよっかなー」的な検討時間も含め
Gruntは4時間ほどかかり、gulpは2時間ほどでした。
Gruntの方がオブジェクト指向的な抽象化が多く細かな責務を分担しており、読み解きに手こずったのが原因かと思います。
ただ、更に理解を深めていくと「よりフレームワーク的」である」Gruntのほうが扱い易いのかもしれません。
設定ファイルから比較する
- Grunt
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
target1: {
src: 'foo.js',
dest: 'foo.min.js'
}
}
});
grunt.registerTask('default', ['uglify']);
};
- gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('default', function() {
gulp.src('foo.js')
.pipe(uglify())
.pipe(gulp.dest('dest'));
});
ここでもGruntはconfigとtaskで細かな責務分担を行っており、タスクで使用する変数はコンフィグに持たせるポリシーですね。
Gruntfileで気になるのは設定が増えてきた場合に、
ひとつのタスクに対してinitConfigとregisterTaskの記述箇所が離れてしまい一覧性を損ねそうなのが億劫になりそうです。
対してgulpはタスク内にsrcやdestといった情報をそのまま突っ込んでます。
gulp API リファレンスをみても共通的な変数を持たせる仕組みは用意していないように見えます。
あと、gruntはタスクに対してプラグインの名前を指定する形式になっているので処理が定型化されているのも特徴でしょうか。
自作関数も定義できますが提携処理の途中にカスタム処理を挟むのは難しいんではないかと思います。
それぞれの特徴が見えてきました。
で、どっちが美味いの？
これはもう、ぶっちゃけ好みの問題ですが、ほそ道の雑感を超バッサリまとめると
Grunt:質実剛健、一途に尽くす努力家の忠犬。王貞治／須田開代子タイプ
gulp:ゆるふわでフットワーク軽めの野良猫。長嶋茂雄／中山律子タイプ。
「キミが触っていいのはこの範囲だけだよ！」などと
とチームの運用ルール等を細かくしたい場合にはGruntに軍配が上がるように思います。
感覚的にさくさくとタスクを組んだり弄ったりする場合にはgulpの方が自由度が高そうです。
ほそ道的にはビルドツールは毎日触るようなものではないのでライトで迷わない方が好きでありまして
その指向性からするとシンプルで、時にはカスタムもしやすそうなgulpを使いたいなと思いました。
今回は以上です。
次回からはしばらくjQueryと徹底的に向き合ってみようと思います。