Edited at

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

More than 5 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がもう少し成熟して来ると勢力図が変わるのでしょうか...? 見守りたいと思います。