JavaScriptタスク自動化のもう一つの選択肢、「gulp」の利用法

HTML／JavaScript開発作業を効率化する便利ツールの活用 第5回

　本連載では主にHTML／JavaScript開発作業を効率化するさまざまなツールやライブラリを紹介します。今回取り上げるのはJavaScriptによるタスク実行ツール「gulp」です。すでに本連載では類似ツールのGruntを紹介していますが、gulpはメソッドチェーンによる直感的な記述や並列実行など、Gruntにはない特徴があります。記事ではサンプルを交えてgulpの特徴と利用法を説明します。

はじめに

　開発作業で発生する定型的な作業を自動実行させれば、全体の作業効率が大幅に向上します。そのためUNIX／Linux環境のMakeやJavaで利用されるAntなど、さまざまな言語・環境でタスクの自動実行をサポートするツールが存在します。本連載で以前紹介したGruntも、HTML／JavaScript開発におけるタスク実行ツールの一つです。

　今回紹介するgulpは、Grunt同様にHTML／JavaScript開発で発生するさまざまな作業を自動化できます。Node.js上で動作すること、JavaScriptでタスクを記述すること、さまざまなタスクをサポートするプラグインが提供されることなど、gulpとGruntには多くの共通点があります。

図1　gulp／GruntともWebサイトで多数のプラグインを紹介している

　類似のタスクを実行できるgulpとGruntのプラグインの一部を表1に示します。同じような処理ができるプラグインが双方にそろっていることが分かります。

表1　gulpとGruntで類似のタスク／プラグイン

タスク	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に相当する）コマンドラインツールとして利用されます。

リスト1　gulpをインストールするコマンド

npm install --global gulp

　今回は以下の環境で動作を確認しています。

• Windows 7 64bit版
• Node.js v4.0.0 64bit版
• gulp v3.9.0
• Internet Explorer 11