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


## はじめに

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

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

| 名称                           | 環境    | 設定ファイル     | 可読性 | GitHub                                     | プラグイン                            | Issues | 初コミット |
|:------------------------------|:--------|:---------------|:----:|--------------------------------------------:|------------------------------------:|-------:|--------:|
| [Grunt](http://gruntjs.com/)  | Node.js | /Gruntfile.js  | △    | [7,816 ★](https://github.com/gruntjs/grunt) | [2,759](http://gruntjs.com/plugins) | 1,134件 | 2011-09 |
| [gulp.js](http://gulpjs.com/) | Node.js | /gulpfile.js   | ◎    | [5,876 ★](https://github.com/gulpjs/gulp)   | [639](http://gulpjs.com/plugins/)   | 448件 | 2013-07
| [Brunch](http://brunch.io)    | Node.js | /config.coffee | ○    | [3,431 ★](https://github.com/brunch/brunch) | [58](http://brunch.io/plugins.html) | 832件 | 2011-09 |
| Broccoli                      | Node.js | /Brocfile.js   | ○    | [1,060 ★](https://github.com/broccolijs/broccoli) | [38](https://github.com/broccolijs/broccoli#plugins) | 142件 | 2013-11 |
| [Guard](http://guardgem.org/) | Ruby | /Guardfile |  | [3,522 ★](https://github.com/guard/guard) | [262](https://rubygems.org/search?utf8=%E2%9C%93&query=guard-) | 596件 | 2010-10 |
| [Middleman](http://middlemanapp.com/) | Ruby | /config.rb |  | [3,131 ★](https://github.com/middleman/middleman) | [30](http://directory.middlemanapp.com/#/extensions/all) | 1,271件 | 2009-07 |
| [CodeKit](https://incident57.com/codekit/) | Mac | n/a | n/a | n/a | n/a | n/a | n/a |
| [Prepros](http://alphapixels.com/prepros/) | Mac | n/a | n/a | n/a | n/a | n/a | n/a |
| [Hammer](http://hammerformac.com/) | 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](https://qiita-image-store.s3.amazonaws.com/0/1858/34c6650b-0d0f-893f-2187-fd83c9b22a8a.png "Grunt- The JavaScript Task Runner.png")

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

- 公式サイト - [http://gruntjs.com/](http://gruntjs.com/)
- GitHub - [https://github.com/gruntjs/grunt](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

![gulp.js - the streaming build system.png](https://qiita-image-store.s3.amazonaws.com/0/1858/c45b6883-1015-54b3-916a-4a2b13e35826.png "gulp.js - the streaming build system.png")


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

- 公式サイト - [http://gulpjs.com/](http://gulpjs.com/)
- GitHub - [https://github.com/gulpjs/gulp/](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

![Brunch | ultra-fast HTML5 build tool.png](https://qiita-image-store.s3.amazonaws.com/0/1858/3642eb2c-0d2c-28a8-3c62-5fb24508a784.png "Brunch | ultra-fast HTML5 build tool.png")


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

- 公式サイト - [http://brunch.io/](http://brunch.io/)
- GitHub - [https://github.com/brunch/brunch/](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

![broccolijs-broccoli.png](https://qiita-image-store.s3.amazonaws.com/0/1858/b87a02c9-a7bb-ff3b-551f-ca6fc79b603c.png "broccolijs-broccoli.png")


公式サイトはまだない! 現状では、作者の[ブログ](http://www.solitr.com/blog/2014/02/broccoli-first-release/)が一番まとまってる?

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](https://github.com/broccolijs/broccoli)


## GUIアプリケーション

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

- [CodeKit](https://incident57.com/codekit/) - Mac
- [Prepros](http://alphapixels.com/prepros/) - Mac / Win
- [Hammer](http://hammerformac.com/) - Mac

![CodeKit- THE Mac App For Web Developers.png](https://qiita-image-store.s3.amazonaws.com/0/1858/811723d2-ed6c-bb24-ce12-2bcaaa58cbab.png "CodeKit- THE Mac App For Web Developers.png")

ちょっと範疇が違う気もしつつ、インストールするパッケージ次第で、ビルドツール的な使い方もできるエディタとしては、次の2つ。後者は、開発元のGitHubが[完全オープンソース化を発表](http://blog.atom.io/2014/05/06/atom-is-now-open-source.html)したばかり。

- [Sublime Text](http://www.sublimetext.com/)
- [Atom](https://atom.io/)

![Atom.png](https://qiita-image-store.s3.amazonaws.com/0/1858/0da7dcbb-55f4-fb33-555b-ee813cb09018.png "Atom.png")


## Ruby系

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

* [Middleman](http://middlemanapp.com/)
* [Guard](http://guardgem.org/)
* [Watchr](https://github.com/mynyml/watchr) ※ディスコン


## コマンドラインツール

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

- [Make](http://www.gnu.org/software/make/)
- [Ant](http://ant.apache.org/)
- [Rake](http://rake.rubyforge.org/)
- [Fabric](http://docs.fabfile.org/)
- [Watchman](https://facebook.github.io/watchman/): Facebook謹製のファイル監視ツール (2013年1月リリース)
- [Jake](http://jakejs.com/): MakeのJavaScript版的な位置づけ (2010年8月リリース)


## まとめ

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

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

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

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