最近のフロント系ビルドツールまとめ

フロントエンドのタスクランナーが脚光を浴びています。 おもなツールの特徴と、簡単に使い方をまとめてみました。

	ファイル監視	ファイル監視	プロジェクト テンプレート	local server
Grunt	○	○	×	○
Gulp	○	○	×	○
Mimosa	○	○	○	○
Brunch	○	○	○	○
Angus	○	○	○	○
Lineman.js	○	○	○	○
Middleman	○	○	○	○

JavaScriptタスクランナーを広めた Grunt

GruntはRuby製のGuardに影響を受けて、後のタスクランナーに影響を与えました。

grantの設定ファイルは、初期化部分と実行タスクに別れ、それが故にコードが大きくなると可読性＆メンテナンス性が悪くなると言う弊害があります。しかし、タスクの責任範囲が明確になっているので、大きなプロジェクトでは各担当の管理部分がわかりやすいというメリットがあります。

1. グローバルにgruntのCLIパッケージをインストールします。

$ npm install -g grunt-cli

2. プロジェクトのディレクトリに移動し、npmコマンドでpackage.jsonを生成します。

$ npm init

2. gruntのパッケージをインストールします。

$ npm install grunt-contrib -save-dev

3. gruntの設定ファイルを「Gruntfile.js」として作成します。

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });
};

4. gruntを実行します。

$ grunt

もはやデファクト Gulp.js

gulp.jsは、並列タスク処理が可能（もちろん、順次タスク処理も可能）でパワフルなタスクランナーです。 学習コストも低いとありますが、多くのプロジェクトでは、並列タスクと順次タスクを組み合わせることが殆どだと思いますので、その際のタスクファイルを作成するには多少の学習コストがかかると思います。とはいえ、プラグインや設定ファイルのテンプレート開発も活発であり、その組み合わせは多彩でポテンシャルの高さを感じさせる素晴らしいタスクランナーです。

1. グローバルにgulpをインストールします。

$ npm install --global gulp

2. プロジェクトディレクトリに移動して、gulpをインストールします。

$ npm install --save-dev gulp

3. gulpのスクリプトを「gulpfile.js」として作成します。

var gulp = require('gulp');

gulp.task('default', function() {
  // デフォルトタスクを配置
});

4. gulpを実行します

$ gulp

設定より規約主義の Mimosa

Mimosaはディレクトリ名などを明示的な規約として、基本的な設定ファイルを記述することなく、タスクを実行する事に主眼を置いたタスクランナーです。 これにより、複雑になりがちな設定ファイルを作成すること無く、開発に集中することが出来るメリットがあります。 また、MimosaはCLIのプロンプトによる選択操作で、簡単にスタートアップビルドを生成することが可能です。

まずは、その生成コードを確認することで、概ねの構造も確認出来ると思います。ほとんど学習コストが必要がありませんが、拡張機能なども用意されており、ドキュメントもしっかり構成されていますので大変期待の持てるタスクランナーではないかと思います。

mimosa インストール＆セットアップ

1. グローバルにmimosaをインストールします。

$ npm install -g mimosa

2. 新規アプリケーションを作成します。

$ mimosa new nameOfApplicationHere

ここでは、割愛しますが、このあと、JavaScript、CSSなどの確認を行うコマンドプロンプトの選択が始まります。

3. buildします

$ mimosa build

4. サーバを開始します。

$ mimosa watch --server

同時に、コード監視もスタートします。

Brunch

BrunchはGruntとほぼ同時期に開発がスタートした、パイプライン型のタスクランナーです。 差分による再構築のため、速度的に優れているのが最大の特徴でしょう。 また、規約型のタスクランナーでもあるので、初期導入コストは非常に低いと思います。

もう一点、特徴的なのは、スタートアップ時のSkeltonが用意されている事でしょう。 こちらのSkeltonサイトを見ると、主要な技術はカバーしているようです。

1．グローバルにbrunchをインストールします。

$ npm install -g brunch

2．Skeltonから、新規アプリケーションを作成します。

ここでは、Skeltonから、brunch-with-brunchを選択しました。

$ brunch new gh:monokrome/brunch-with-brunch brunch-test

3．サーバを開始します。

$ cd brunch-test
$ brunch watch --server

これで、サーバが立ち上がります。以下がデフォルトのアクセスURLです。

http://localhost:3333

Brunchもライブリロード機能が存在しますので、編集が行われるとサイトに即時反映されます。

Angus

Angusは規約に沿って設定ファイルを作成することで、開発の負担を減らすのと同時に設定ファイルの複雑さを押さえることで、メンテナンス性が良くなっています。 解説のスライドもあります。

スライド

1．グローバルにangusをインストールします。

$ npm install -g angus

2．新規アプリケーションを作成します。

$ angus create my-app

3．サーバを開始します。

$ angus dev

これで、サーバが立ち上がります。以下がデフォルトのアクセスURLです。

http://localhost:9000

ライブリロード機能もありますので、編集が掛かるとサイトが即時反映されます。また、angus prodのコマンドで、Minifyやファイル関連の本番化が行えます。

Gruntなどタスクランナーをラップした Lineman.js

LinemanはGrunt、ExpressやTestemなどを薄くラップしたツールとなっています。 デフォルトでプロジェクトのひな形を構築してから、サーバ起動やテストまでを行えます。 タスクランナーとしてGruntを軸に規約ベースで連携しますので、Gruntを利用していた方は非常に使い勝手がよいのではないでしょうか。

1. グローバルにlinemanをインストールします。

$ npm install -g lineman

2. 新規アプリケーションを作成します。

$ lineman new your-project

これで、各ディレクトリや最低限必要なファイルが作成されます。

3. buildします

$ lineman build

4. サーバを開始します。

$ lineman run

これで、サーバが立ち上がります。以下がアクセスURLです。

http://localhost:8000

静的サイトジェネレータ Middleman

Ruby製のタスクランナーです。利用には、ruby gemが必要になります。
こちらも初期開発からテスト、デプロイまでをカバーしています。
Rubyによる拡張も可能で、Rubyプロジェクトには相性が良さそうです。

1. middlemanをインストールします。

$ gem install middleman

2. 新規アプリケーションを作成します。

$ middleman init my_new_project

Web開発向けのスケルトンが作成されます。

3. buildします

$ lineman build

4. サーバを開始します。

$ bundle exec middleman server

これで、サーバが立ち上がります。以下がアクセスURLです。

http://localhost:4567/

5. ライブリロード機能

config.rb を開いて次の行を追加すると、ライブリロード機能が利用出来ます。

activate :livereload

これにより、サーバが自動的にリロードされます。

まとめ

如何でしたでしょうか？今後も、WEBフロントエンド開発においては、さらに効率を求めたタスクランナーが出現するかもしれません。

ただ、一過性の流行廃りで選択するのではなく、開発現場において最適なツールを見極めてください。そんなツール選定で参考にしてみてください。