はじめに
開発作業で発生する定型的な作業を自動実行させれば、全体の作業効率が大幅に向上します。そのためUNIX／Linux環境のMakeやJavaで利用されるAntなど、さまざまな言語・環境でタスクの自動実行をサポートするツールが存在します。本連載で以前紹介したGruntも、HTML／JavaScript開発におけるタスク実行ツールの一つです。
今回紹介するgulpは、Grunt同様にHTML／JavaScript開発で発生するさまざまな作業を自動化できます。Node.js上で動作すること、JavaScriptでタスクを記述すること、さまざまなタスクをサポートするプラグインが提供されることなど、gulpとGruntには多くの共通点があります。
類似のタスクを実行できるgulpとGruntのプラグインの一部を表1に示します。同じような処理ができるプラグインが双方にそろっていることが分かります。
| タスク | gulpプラグイン | Gruntプラグイン |
|---|---|---|
| ファイルコピー | gulp-copy | contrib-copy |
| FTP通信 | gulp-ftp | ftp-deploy |
| JavaScriptの最小化 | gulp-uglify | contrib-uglify |
| CoffeeScriptコンパイル | gulp-coffee | contrib-coffee |
| 変更を監視してタスク実行 | gulp標準のwatch | contrib-watch |
しかしながらgulpはGruntとは異なる、以下のような特徴を備えています。
- 複数のタスクを非同期で実行できる
- 連続した処理をストリームとして実行する「ストリーミングビルドシステム」である
- ストリームの一連の処理内容をメソッドチェーンで直感的に記述できる
- ファイルの変更監視機能を標準で備える（Gruntはプラグイン）
一方でプラグイン自体の充実度はGruntが勝っており、場合によっては使い分けが必要です。
本記事ではサンプルコードを通して、このようなgulpの特徴や利用法を紹介していきます。
対象読者
- 余計な作業はやらずにプログラミングに集中したい方
- いつも同じような作業をやっていると感じている方
- Gruntは使っているが他の環境も使ってみたい方
必要な環境の準備
gulpの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。
Node.jsのインストール後、リスト1のコマンドでgulpをインストールします。「--global」（または「-g」）は（特定のプロジェクトやフォルダにではなく）システム自体にインストールするためのオプションです。ここでインストールされたgulpは（Gruntのgrunt-cliに相当する）コマンドラインツールとして利用されます。
npm install --global gulp
今回は以下の環境で動作を確認しています。
- Windows 7 64bit版
- Node.js v4.0.0 64bit版
- gulp v3.9.0
- Internet Explorer 11
