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

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

cognitom
下北沢オープンソースCafeのマスターで、図書館サービス「リブライズ」のデザイン担当。Riot.jsのコア開発者。
https://github.com/cognitom
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
No 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
ユーザーは見つかりませんでした