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

はじめに

そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしては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。プラグインが最多。Yeomanを構成するツールのひとつ。

• 公式サイト - http://gruntjs.com/
• GitHub - https://github.com/gruntjs/grunt

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

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

• 公式サイト - http://gulpjs.com/
• GitHub - https://github.com/gulpjs/gulp/

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

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

• 公式サイト - http://brunch.io/
• GitHub - https://github.com/brunch/brunch/

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

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

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];
};

• 公式サイト - なし
• GitHub - https://github.com/broccolijs/broccoli

GUIアプリケーション

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

• CodeKit - Mac
• Prepros - Mac / Win
• Hammer - Mac

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

• Sublime Text
• Atom

Ruby系

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

• Middleman
• Guard
• Watchr ※ディスコン

コマンドラインツール

ビルドツールって、別段新しいものではなく、数十年前からありました。でも、この辺をフロントエンドで使えるかというと、たぶん難しいでしょうね...。最近の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がもう少し成熟して来ると勢力図が変わるのでしょうか...? 見守りたいと思います。