grunt
brunch
gulp
Broccoli

ビルドツールまとめ。Gruntとかgulpとか (フロント寄り)

More than 3 years have passed since last update.

はじめに

そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。

下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。

名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
Grunt Node.js /Gruntfile.js 7,816 ★ 2,759 1,134件 2011-09
gulp.js Node.js /gulpfile.js 5,876 ★ 639 448件 2013-07
Brunch Node.js /config.coffee 3,431 ★ 58 832件 2011-09
Broccoli Node.js /Brocfile.js 1,060 ★ 38 142件 2013-11
Guard Ruby /Guardfile 3,522 ★ 262 596件 2010-10
Middleman Ruby /config.rb 3,131 ★ 30 1,271件 2009-07
CodeKit Mac n/a n/a n/a n/a n/a n/a
Prepros Mac n/a n/a n/a n/a n/a n/a
Hammer Mac n/a n/a n/a n/a n/a n/a

※数値は、2014年5月7日現在

JavaScript系

実行系としてNode.jsを使うビルドツール4種を駆け足で紹介します。いずれも、npmからインストールできます。

Grunt

Grunt- The JavaScript Task Runner.png

遅い! 設定ファイルが分かりにくい! とか言われつつもデファクト感のあるのがGrunt。プラグインが最多。Yeomanを構成するツールのひとつ。

Gruntfile.js
// 設定ファイル例 
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

gulp.js

gulp.js - the streaming build system.png

去年あたりから盛り上がりを見せて、現時点で開発コミュニティの活動が一番活発。シンプルな設定ファイルと、実行速度に定評あり。プラグインをpipeして連続実行できるため、中間ファイルの生成が不要。Node.jsの特性を活かした、非同期処理でパラレルに複数のタスクを走らせる事ができます。(同期的に書くことも可)

gulpfile.js
// 設定ファイル例
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    cached = require('gulp-cached'),
    remember = require('gulp-remember');

var scriptsGlob = 'src/**/*.js';

gulp.task('scripts', function () {
  return gulp.src(scriptsGlob)
    .pipe(cached('scripts')) // only pass through changed files
    .pipe(jshint()) // do special things to the changed files...
    .pipe(remember('scripts')) // add back all files to the stream
    .pipe(concat('app.js')) // do things that require all files
    .pipe(gulp.dest('public/'))
});

Brunch

Brunch | ultra-fast HTML5 build tool.png

大雑把に言えば、Grunt + Yeoman といった趣き。あらかじめ"Skelton"というテンプレートがコミュニティから提供されています。Bower連携が最初から想定されているのも特徴。設定ファイルは、Gruntとgulpの中間という印象で、Gruntからの移行は楽そうです。実は、最初のコミットはGruntとほぼ同時期。

config.coffee
# 設定ファイル例
exports.config =
  files:
    javascripts:
      joinTo:
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(bower_components|vendor)/

    stylesheets:
      joinTo: 'stylesheets/app.css'
      order:
        after: ['vendor/styles/helpers.css']

    templates:
      joinTo: 'javascripts/app.js'

Broccoli

broccolijs-broccoli.png

公式サイトはまだない! 現状では、作者のブログが一番まとまってる?

Gruntはおじさんくさいし、gulpは処理が全部ストリーム扱いって誰得なの? みたいな動機で開発されたビルドツール。ファイルではなく、「ファイルツリー」を加工するというかたちをとります。

Brocfile.js
// 設定ファイル例
module.exports = function (broccoli) {
  var filterCoffeeScript = require('broccoli-coffee');
  var compileES6 = require('broccoli-es6-concatenator');

  var sourceTree = broccoli.makeTree('lib');
  sourceTree = filterCoffeeScript(sourceTree);

  var appJs = compileES6(sourceTree, {
    ...
    outputFile: '/assets/app.js'
  });

  var publicFiles = broccoli.makeTree('public');

  return [appJs, publicFiles];
};

GUIアプリケーション

着実にバージョンアップして、BowerのGUIとしても機能するようになったCodeKitに注目。ただ、用途によっては、自由度が低いのがどうしようもないところ。

CodeKit- THE Mac App For Web Developers.png

ちょっと範疇が違う気もしつつ、インストールするパッケージ次第で、ビルドツール的な使い方もできるエディタとしては、次の2つ。後者は、開発元のGitHubが完全オープンソース化を発表したばかり。

Atom.png

Ruby系

詳しくないので、メモだけ。MiddlemanはビルドツールというよりもStatic Site Generatorですが、フロントのモックをこれで作るケースもあると思うので、候補に入れました。

コマンドラインツール

ビルドツールって、別段新しいものではなく、数十年前からありました。でも、この辺をフロントエンドで使えるかというと、たぶん難しいでしょうね...。最近のNode.js系のツールが出てから、何か質的な変化が起きた感があります。

  • Make
  • Ant
  • Rake
  • Fabric
  • Watchman: Facebook謹製のファイル監視ツール (2013年1月リリース)
  • Jake: MakeのJavaScript版的な位置づけ (2010年8月リリース)

まとめ

来年再来年のデファクトが何になっているのか、まだ読めない部分もありますが、選択のポイントをまとめてみます。最初に掲載した比較表も参考にしてください。大雑把には、次のような方針になるかと。

  • ケース1「コマンドラインがいやだ!」 → CodeKit
  • ケース2「コミュニティと資産を重視」 → Grunt
  • ケース3「設定ファイルを自分でちゃんと書きたい」 → gulp.js
  • ケース4「Rails命」 → Guard

Broccoliは最後発の割に、これは!という機能がまだ少ないので、通常は選択肢には入れなくて良さげ。BrunchはBower.js連携など魅力的な部分がありつつも、プラグインが少ないので用途に合うかどうか次第ですね。

一般的な選択肢としては、依然Gruntに部がありつつも、使いづらさがあるのは確か。gulpがもう少し成熟して来ると勢力図が変わるのでしょうか...? 見守りたいと思います。