こんにちは。
エンジニアの岡本です。
フロントエンド開発を楽にさせる、タスクランナー。
この言葉は身近ではないかもしれないですが、みなさまも以下の名前は聞いたことがあるでしょう。
- Grunt
- gulp
- webpack
どのようなものかを簡単にご説明すると
- ファイルの種類ごとにタスクを分けられる
- タスクの中で好きなようにあれこれできる
- ファイルの変更監視ができる
と、ぼんやりしたご説明ですが、例えば
JavaScript を生成する中間言語（altJS）である TypeScript でプログラムを書けば、ファイル名・拡張子が変更されて、コンパイルされた JavaScript の結果をブラウザ上で確認する。
ということをタスクランナーを使えば、テキストエディタで TypeScript の保存ボタンを押した途端にすべて実行することができるのです。
これを手作業でやろうと思うと、面倒くさいことはお分かりいただけるかと思います。
本記事では、各タスクランナーの長所短所を実際に使用した経験から独断と偏見で説明していきます。
Grunt
Grunt: The JavaScript Task Runner
2010 年代初期に登場した、今回ご紹介するタスクランナーの中で一番の長です。長老です。
良いところ
歴史故にプラグインが多い
Node.js の登場と共に現れたこのタスクランナー。
後から登場する gulp 初期の頃は「gulp は魅力的だが プラグインが豊富だから Grunt」と言われていました。
ただ、今では gulp がかなり成長しきったので、この魅力も薄いものです。
嫌なところ
重い
並列処理に対応していない Grunt はファイル数が多くなると途端に重くなる傾向があります。
ファイル変更監視を行う watch も重いです。
設定ファイルが大きくなりすぎる
設定ファイルは JavaScript のオブジェクト型の要素に定義していくことで作成します。
対応する処理を増やしていくと、他のタスクランナーに比べファイルが大きくなっていく傾向があります。
世間がもう gulp になってる
長らく Grunt は v0.4 以降のバージョンアップもなく、 ようやく最近になって v1.0 にアップデートされました。
その間に gulp はバージョンアップとプラグインの拡充のおかげで地位を築き、 新規案件でタスクランナーの選択肢として Grunt を選ぶことはなくなりました。
Grunt でググっても出てくるのは古い記事ばかりというのが、その証拠と言えるでしょう。
おすすめ利用シーン
2016 年現在は特になし
gulp
gulp.js – the streaming build system
Grunt の登場以降に現れた、タスクランナーの中堅的存在です。
Grunt の地位はすでに奪っていると筆者は考えています。
良いところ
タスク別の並列処理が可能
Grunt の欠点であった「重さ」というのは多少解決しています。
ただプラグインを大量に使用し、プロジェクト自体が肥大化してくるとその恩恵も薄れますので、Grunt より早い程度に考えるとよさそうです。
融通がきく
gulp は jQuery でもおなじみのメソッドチェーンで1つのタスクの処理を書いていきます。
入力から処理したいプラグインのメソッドを呼び出し、最後に出力先を定義する形です。
もし世のプラグインでは実現不可なことでも、最悪メソッドチェーンのなかで自分で書いたメソッドを呼び出せば、解決することができます。
map-stream なるモジュールを利用するとこのあたりは簡単に実装できます。
map-stream
嫌なところ
JavaScript の require や import といった外部ファイル読み込みと相性悪い
そもそもブラウザで動くJavaScript には require、import、include といったどの言語にでもある外部スクリプトを呼び出すようなメソッドがありません。
これを実現するための Browserify という Node.js のモジュール（npm モジュール）がありますが、残念ながら返却値のオブジェクトの型の違いから相性がよくありません。
watch 処理や AltJS 処理があわさってくると、メソッドチェーンだけでは完結しなかったりします。
おすすめ利用シーン
SPA（シングルページアプリケーション）ではなく、複数のフロントエンドリソースを捌くプロジェクト
webpack
タスクランナーというよりは Browserify の対抗馬という印象もありますが、 前述したタスクランナーとしての要素を満たしているので紹介します。
良いところ
強力な依存関係解決や監視機能がデフォルト機能でサポート
import で読み込み先のファイルから、さらに読み込んだファイルが変更されてもちゃんと一番上層の呼び出し元のファイルが変更されたことになったり、 複数のファイルから呼び出されているあるファイルを更新しても、ちゃんと全ファイル更新されたり、デフォルトで強力に変更監視や依存解決がサポートされているのが魅力です。
しかも処理が早く、生成後 2 万行になるような JavaScript も、さっとコンパイルしてくれます。
嫌なところ
設定が結構ややこしい
Grunt 同様、設定ファイルはオブジェクト型の要素に定義していくことで作成します。 凝ったことをしようとすると、細かい設定を行わなくてはならず、 またはそもそも対応していない、ということになりがちです。
融通が利かないため、複数の JavaScript ファイルを生成したい場合の設定に多少骨が折れました。
おすすめ利用シーン
SPA の開発を行うプロジェクト。
いかがでしたでしょうか。
ちなみに筆者は良いところどりを考えて、「gulp + webpack + gulp-sass + gulp-ejs」という構成でフロントエンド開発を行っていますが、 1ヶ月後か、はたまた1週間後にはまた違う構成で開発を行っていることでしょう。
プロジェクトごとに最適解は異なるでしょう。
そのプロジェクトの方針に合わせて、タスクランナーを選択するのがよいと考えています。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
