Help us understand the problem. What is going on with this article?

Gruntとgulpを比較 〜 JSおくのほそ道 #008

More than 5 years have passed since last update.

こんにちはほそ道です。
前々回のGrunt前回のgulpにてそれぞれの基本構造を掘り下げてみたので
2つを対比した感想を述べてみたいと思います。
なお、ほそ道の独断と偏見により書き連ねて参りますので
いずれかのツールのファンの方はお気を悪くされないでくださいませ。

目次はこちら

概念図から比較する

  • Grunt

スクリーンショット 2014-05-25 2.30.09.png

  • gulp

スクリーンショット 2014-05-25 18.39.11.png

結論、短時間での概念習得に関してはgulpの方が理解し易く、その気になればカスタマイズなども重くなく出来そうです。
gulpは手続型っぽくgulpコマンドのgulp.js内で何となくのシーケンスが把握できます。

図の単純な作成時間は「どうやってまとめよっかなー」的な検討時間も含め
Gruntは4時間ほどかかり、gulpは2時間ほどでした。
Gruntの方がオブジェクト指向的な抽象化が多く細かな責務を分担しており、読み解きに手こずったのが原因かと思います。
ただ、更に理解を深めていくと「よりフレームワーク的」である」Gruntのほうが扱い易いのかもしれません。

設定ファイルから比較する

  • Grunt
Gruntfile.js
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
gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('default', function() {
  gulp.src('foo.js')
    .pipe(uglify())
    .pipe(gulp.dest('dest'));
});

ここでもGruntはconfigtaskで細かな責務分担を行っており、タスクで使用する変数はコンフィグに持たせるポリシーですね。
Gruntfileで気になるのは設定が増えてきた場合に、
ひとつのタスクに対してinitConfigとregisterTaskの記述箇所が離れてしまい一覧性を損ねそうなのが億劫になりそうです。
対してgulpはタスク内にsrcやdestといった情報をそのまま突っ込んでます。
gulp API リファレンスをみても共通的な変数を持たせる仕組みは用意していないように見えます。
あと、gruntはタスクに対してプラグインの名前を指定する形式になっているので処理が定型化されているのも特徴でしょうか。
自作関数も定義できますが提携処理の途中にカスタム処理を挟むのは難しいんではないかと思います。
それぞれの特徴が見えてきました。

で、どっちが美味いの?

これはもう、ぶっちゃけ好みの問題ですが、ほそ道の雑感を超バッサリまとめると

Grunt:質実剛健、一途に尽くす努力家の忠犬。王貞治/須田開代子タイプ
gulp:ゆるふわでフットワーク軽めの野良猫。長嶋茂雄/中山律子タイプ。

「キミが触っていいのはこの範囲だけだよ!」などと
とチームの運用ルール等を細かくしたい場合にはGruntに軍配が上がるように思います。
感覚的にさくさくとタスクを組んだり弄ったりする場合にはgulpの方が自由度が高そうです。

ほそ道的にはビルドツールは毎日触るようなものではないのでライトで迷わない方が好きでありまして
その指向性からするとシンプルで、時にはカスタムもしやすそうなgulpを使いたいなと思いました。

今回は以上です。
次回からはしばらくjQueryと徹底的に向き合ってみようと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away