Web制作において、生産性や品質の向上のためにテンプレートエンジンやタスクランナーを用いて開発を行っているという技術者も少なくないでしょう。さまざまなツールが登場していますが、なかでもおすすめなのがタスク自動化ツールのgulpです。そこで、gulpのインストール方法や基本的な使い方、便利なプラグインなどを紹介します。

gulpとは

Web制作におけるコーディング作業といえば、かつてはHTMLやCSS、JavaScriptなどのファイルを直接編集する方法が主流でしたが、より扱いやすい別の言語で開発を進めることが多くなってきています。HTMLの代わりにPugのようなテンプレートエンジンを使い、CSSとJavaScriptはSassやTypeScriptで書いてから変換しているという人も少なくないでしょう。このような開発方法を用いれば、Web制作の生産性と品質は飛躍的に向上しますが、いわゆる「ビルド」タスクというルーティンワークが必要になるため、煩わしい一面もあります。

こうした煩わしさを解消してくれるのが、タスク自動化ツールのgulpです。繰り返して行う必要のあるタスクは、gulpを用いてあらかじめ定義しておけば、いつでも必要なときに簡単なコマンドで実行できるようになります。これにより、Web制作の業務効率を格段にアップすることができるのです。gulpはNode.jsで作られており、タスクの定義に用いるのはJavaScriptなので、Web制作を行う人にとっては比較的なじみやすいでしょう。また、Webページのロード時間を考慮して、すでに存在するファイルを圧縮・結合したり難読化したりといった、ひと手間加える処理にもgulpを利用することが可能です。

【手順1】Node.jsのインストール

gulpを動作させるためには、事前にNode.jsのインストールが必要です。Node.jsの実行ファイルは公式サイトからダウンロードできるので、環境に合ったものを選びましょう。WindowsかMacなら、インストーラーが用意されているので簡単です。

すでにNode.jsをインストール済みの場合は、バージョンを確認します。コマンドラインから「node --version」と実行すると現在のNode.jsのバージョンが表示されるので、公式サイトで配布されているバージョンと比べてみましょう。もし、インストール済みのバージョンが古ければ、最新版をインストールしておくとよいでしょう。

Node.jsのインストールが完了すると「node」コマンドのほか、パッケージをインストールするための「npm」コマンドも利用可能になります。パッケージとは、Node.jsで実行できるプログラムなどを機能別にまとめたものです。gulpの本体やプラグインも、Node.jsのパッケージです。コマンドラインから「npm install パッケージ名」と実行することで、「node_modules」ディレクトリが作成され、そのなかにパッケージがインストールされる仕組みになっています。

【手順2】gulpのインストール

Node.jsに引き続き、gulpをインストールします。公式サイトでは、まず「npm install --global gulp-cli」と実行して、コマンドラインユーティリティをインストールするよう案内されています。これは、グローバルインストールされたgulpが存在した場合でも、ローカル版のgulpを実行しやすくするための設定です。Node.jsの操作に慣れていれば必ずしも必要なものではありませんが、公式の手順なので、基本的には実行しておきましょう。

gulpのインストール先は、Web制作プロジェクトごとのディレクトリになります。対象となるディレクトリに移動し、「npm init」と実行しましょう。すると、プロジェクト名やバージョンなどについての質問が表示され、すべて入力すると「package.json」という名前のファイルが作成されます。次に「npm install --save-dev gulp」と実行して、gulpのパッケージをインストールします。「--save-dev」オプションは「このプロジェクトの開発に用いるパッケージである」という意味の指定です。

以上でgulpのインストールは完了ですが、念のため「gulp --version」と実行して、バージョンを確認しましょう。コマンドラインユーティリティとgulp本体のバージョンが表示されれば、問題なくインストールできています。なお、gulpのパッケージを「npm install --g gulp」と実行してインストールするように説明しているWebサイトなどもありますが、この方法は公式の手順とは異なるため注意しましょう。

gulpの基本的な使い方

ここからは、gulpを使ってタスクを実行するための基本的な手順について説明します。

パッケージのインストール

gulpでは、タスクで実行可能なさまざまな機能がプラグインとして提供されています。たとえば、ファイルを圧縮したり、CSSをコンパイルしたりといった機能です。プラグインもNode.jsのパッケージなので、gulp本体と同様に「npm install --save-dev パッケージ名」と実行すればインストール可能です。なお、インストールしておくと便利なプラグインについては、記事の後半で紹介します。

タスクの作成

gulpで実行するタスクは、gulpfileというファイルに定義することになっています。これはJavaScriptファイルなので、普段から使っているテキストエディタで作成すれば問題ありません。ファイル名は「gulpfile.js」とします。

gulpfileの冒頭には、パッケージの読み込みを行う宣言が必要です。最初の行は「const gulp = require('gulp');」として、gulp本体を指定します。次の行からは「const 変数名 = require('パッケージ名');」として、使いたいプラグインの数だけパッケージを指定します。このとき、どのような変数名にするかは任意ですが、パッケージ名を推測しやすい名前にするのがおすすめです。たとえば、後ほど紹介する「gulp-imagemin」プラグインであれば「const imagemin = require('gulp-imagemin');」などとすればよいでしょう。

次に、タスクを定義していきます。1つのgulpfileの中で、実行できるようにしたいタスクをいくつでも記述可能です。タスクはJavaScriptの関数として定義して「exports.タスク名 = 関数名;」と指定することでコマンドラインから呼び出し可能になります。たとえば、ビルドを行うタスクを「build」という関数名で定義したなら「exports.build = build;」などとすればよいでしょう。タスクが1つしかない場合は「exports.default = build;」のようにすれば、デフォルトコマンドとして定義できます。

タスクの実行

タスクの実行は、Node.jsの「npx」コマンドで行います。コマンドラインから「npx gulp タスク名」と実行すると、gulpfile内の対応する関数が実行される仕組みです。デフォルトコマンドについては「npx gulp」というようにタスク名を省略して実行できます。

Web制作では、ファイルを編集した際に自動的にタスクが実行できると便利な場合もあるでしょう。gulpでは、そのようなタスクも「watch」という仕組みで実現可能です。gulpfileでタスクを定義する際に「gulp.watch()」というAPIを使用することでファイルシステムの監視が可能になり、ファイルが変更されたことを検出して特定の処理を実行させることができます。

gulpのおすすめプラグイン

ここからは、Web制作でgulpを使う際におすすめのプラグインについて紹介していきます。

gulp-imagemin（画像圧縮）

「gulp-imagemin」は、画像のファイルサイズを圧縮するためのプラグインです。インストールするには、コマンドラインから「npm install --save-dev gulp-imagemin」と実行します。このプラグインは、imageminをgulpから利用可能にしたものです。imageminもまたNode.jsのパッケージであり、gulpを介さずに単独で使用することもできます。対応している画像フォーマットは、PNG、JPEG、GIF、そしてSVGとなっています。

gulp-sass（Sassのコンパイル）

「gulp-sass」は、Sassをコンパイルするためのプラグインです。「npm install --save-dev gulp-sass」のコマンドを実行することでインストールできます。Sassとは、スタイルシートを拡張して書きやすくするとともに、表現力を高めた言語です。同様のものにLessなどがありますが、人気の面ではSassがリードしているようです。Sassで書いたスタイルシートはそのままではブラウザで読み込めないため、コンパイルしてCSSに変換する必要があります。コンパイル時には、ファイルサイズを圧縮することも可能です。

gulp-autoprefixer（ベンダープレフィックス）

「gulp-autoprefixer」は、CSSにベンダープレフィックス（vendor prefix）を挿入するためのプラグインです。「npm install --save-dev gulp-autoprefixer」と実行すればインストールできます。ベンダープレフィックスとは、まだ正式採用に至っていないCSSの規格をブラウザが先行実装している場合につけられている、CSSプロパティの接頭辞のことです。

本プラグインは、ベンダープレフィックスを自動的に挿入してくれるautoprefixerというツールをgulpから利用できるようにしたものです。ターゲットにするブラウザのリストは、複数の指定方法で柔軟に変更できます。autoprefixerは、CSSに対してさまざまな後処理を行えるPostCSSの機能のため「gulp-sass」と併用すればさらに力を発揮するでしょう。

gulp-ejs（EJS)

「gulp-ejs」は、EJSによってHTMLを生成できるようにするためのプラグインです。コマンドラインから「npm install --save-dev gulp-ejs」と実行してインストールします。EJSはHTML用テンプレートエンジンの一種であり、JavaScriptによって動作するのが特徴です。テンプレートにはシンプルな文法を採用しており、HTMLコーディングの際の労力を削減してくれます。静的なWebサイトを制作する際に、特に力を発揮するでしょう。

gulp-csslint（lintチェック）

「gulp-csslint」は、CSSに対してlintのチェックを行うためのプラグインです。インストールのコマンドは「npm install --save-dev gulp-csslint」となっています。lintとは、もともとはC言語などのプログラムを厳密に検証するためのツールです。CSSのlintは、ブラウザによる確認だけでは見つけられないような小さな問題も検出できます。同様のチェックを行うWebサービスも存在していますが、利用するためにはサーバーにアップロードしたうえでURLを入力しなければなりません。「gulp-csslint」を用いれば、そのような手間をかけることなくlintによるチェックが可能になります。

タスク作成時におすすめのプラグイン

gulpには、タスクを作成する際に便利なプラグインも存在します。おすすめのものをいくつか紹介します。

gulp-cached（変更したファイルの取得）

「gulp-cached」は、変更のあったファイルのみを対象としてタスクを実行させるためのプラグインです。インストールするには「npm install --save-dev gulp-cached」とコマンドを実行します。本プラグインが役に立つのは、主に複数のファイルをまとめて処理する必要があるときです。

たとえば、SassからCSSをコンパイルしたい場合は、いくつもあるSassファイルをワイルドカードでまとめてソースに指定するでしょう。このとき、変更されていないファイルについては実際には処理する必要がありません。「gulp-cached」を用いるとメモリ内にキャッシュが作られて、変更のないファイルの処理をスキップさせることができます。その結果、タスクの実行時間が短くなり、より作業がはかどるようになるというわけです。

browser-sync（ブラウザの自動リロード）

「browser-sync」は、ブラウザでの表示確認を助けてくれるNode.jsのパッケージであり、gulpのタスクからでも利用可能です。公式サイトでは、コマンドラインから「npm install -g browser-sync」と実行してインストールする方法が推奨されています。「browser-sync」を使うと、特定のファイルを監視対象に指定しておき、変更があったときにブラウザ画面をリロードさせることができます。リロードそのものは簡単に行える操作ではありますが、Web制作ではブラウザで繰り返し表示を確認しながらファイルに変更を加えていく作業が多くなるため、ファイルを保存するだけで自動的にリロードされるというのは大変便利な機能です。

gulp-plumber（エラー時の監視継続）

「gulp-plumber」は、エラーが発生してもパイプラインが切断されないようにするためのプラグインです。「npm install --save-dev gulp-plumber」と実行すればインストールされます。gulpでは、タスクを定義する際に「pipe()」というAPIで処理をつなげていく方法が一般的です。このような一連の処理をパイプラインと呼びます。パイプラインを実行したとき、途中のどれかの処理でエラーが発生すると、タスクは停止してしまいます。この動作は通常のタスクでは問題になりませんが「watch」によりファイルを監視していると困ることがあるのです。

たとえば、Sassファイルを監視してCSSへのコンパイルを行っている場合は、Sassの文法を少し間違えるたびにタスクが停止し、watchが無効になってしまうでしょう。「gulp-plumber」を導入すれば、このような問題を回避することが可能です。エラーが発生してもパイプラインが切断されることなく、ファイルの監視を続けられるようになります。なお「plumber」とは「配管工」という意味です。パイプラインを維持することから、そのような名称になったのでしょう。