ITに関するさまざまなトピックを紹介するサイトです
このコンテンツはお使いのブラウザには対応しておりません。
新しいバージョンのブラウザでアクセスしてください。

[技術メモ] Gulp

Gulpを導入して、Webコンテンツ制作作業におけるタスクの一部を自動化しました。
導入にあたって調査した内容をコンテンツとしてまとめました。

自動化したタスクは、CSSファイルとJavaScriptファイルの変更を監視して、変更があったファイルのgzip圧縮ファイルを生成する作業です。
gzip圧縮したファイルの出力場所は元のファイルと同じ場所です。
ファイル構成やタスクの目的については、以下のページを参照してください。
Webコンテンツをgzip圧縮配信する
インストールやタスクの実行に関する記述は、Windows環境におけるものです。

項目リスト

概要
プラグイン
インストール
タスクの設定
タスクの実行

概要

GulpはNode.jsをベースとしたツールで、Webのフロントエンド開発におけるタスクを実行します。
ファイルの変更を監視して自動的にタスクを実行することなどが可能となります。 2018年にGulp4がプレリリースされ、2018年12月には正式リリースとなりました。
Gulp3とは記法が異なる部分があり、非推奨となったものもありますが、インターネット上にはGulp3の情報が多く残っているので注意が必要です！

プラグイン

さまざまな処理を実行するために、Gulpにはたくさんのプラグインが用意されています。
代表的なプラグイン
プラグイン名 機能
gulp-htmlhint HTMLの文法をチェックする。
gulp-rename ファイルをリネームする。
gulp-sass SassファイルをCSSファイルにコンパイルする。
gulp-clean-css CSSファイルを最小化する。
gulp-uglify-es JavaScriptファイルを最小化する。（ES6対応版）
gulp-imagemin 画像ファイル（PNG、JPEG、GIF、SVG）を圧縮する。
gulp-livereload ブラウザをリロードする。
gulp-gzip ファイルをgzip圧縮する。

インストール

インストール作業の流れ

  • Node.jsインストール
  • プロジェクトの初期化処理
  • Gulpインストール
  • Gulpプラグインインストール
  • パス設定

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

GulpはNode.jsのパッケージとして提供されています。
パッケージのインストール方法には、グローバルとローカルがあります。
グローバルインストール
PC内のどこからでも利用できる。
ローカルインストール
対象のプロジェクトのみで利用する。
チーム開発などで開発環境を統一したい場合は、ローカルインストールとすることでパッケージのバージョンを統一することができます。 しかし、同じパッケージであっても、利用するプロジェクトが増えていくと、その分ディスク保存容量が増えていってしまいます。
どのプロジェクトでも同じような汎用的な処理しか実行しない場合や、個人利用でチーム開発を意識しなくてよい場合などは、グローバルインストールで容量節約を図ることもできます。

Node.jsインストール

Gulpを利用するためには、まずNode.jsをインストールします。
Node.js　ダウンロード
Node.jsには「LTS（推奨版）」と「最新版」とがあります。
新しい機能を試したい場合は「最新版」を選択し、安定性を重視する場合は「LTS（推奨版）」を選択します。
Gulpのタスクを実行するために利用する場合には、安定性を重視して「LTS（推奨版）」を選択する方が良いと思います。

Windows環境では、インストーラーをダウンロードして実行すると、簡単にインストール作業が終わります。
ウィザードの設定項目は、すべてデフォルトで問題ありません。
以下のようにコマンドを実行して、バージョンが表示されればインストールは成功です。
>node --version
v12.18.2
インストーラーでインストールした場合は、コントロールパネルの「プログラムと機能」に追加されます。

インストール対象から除外していなければ、パッケージ管理ツールのnpmもインストールされます。
以後は、npmコマンドを使用して作業を進めます。

プロジェクトの初期化処理

次に、プロジェクトの初期化処理を実行します。

新規プロジェクトであれば、ディレクトリを新たに作成して、そこに移動します。
すでに開発・制作したものが存在している状態であれば、そのルートディレクトリに移動します。
そこで、初期化処理を実行します。
>npm init
「package name」や「version」、「description」などを対話形式で入力していきます。
実行が完了するとpackage.jsonファイルが作成されます。

Gulpインストール

次に、Gulpパッケージをインストールします。

プロジェクトのpackage.jsonファイルが作成されたディレクトリで、npmコマンドでインストールを実行します。

グローバルインストールの場合

>npm install gulp -g

ローカルインストールの場合

>npm install gulp --save-dev
「--save-dev」オプションを指定すると、開発用のパッケージとして依存関係が定義されます。

Gulpプラグインインストール

次に、Gulpのプラグインをインストールします。

プロジェクトのpackage.jsonファイルが作成されたディレクトリで、パッケージと同様にnpmコマンドでインストールを実行します。

gulp-gzipプラグインをグローバルにインストールする場合

>npm install gulp-gzip -g

gulp-gzipプラグインをローカルにインストールする場合

>npm install gulp-gzip --save-dev

インストール済みのパッケージを確認するには、以下のようにコマンドを実行します。

グローバルの場合

>npm ls -g

ローカルの場合

>npm ls

パス設定

インストールしたパッケージのコマンドを実行するためには、パスを通す必要があります。
グローバルインストールした場合とローカルインストールした場合とでは、対応方法が異なります。

グローバルインストールの場合

Windows環境においては、システム環境変数として「NODE_PATH」を定義します。
以下のコマンドで出力されたパスを設定します。
>npm root -g

ローカルインストールの場合

以前は、ローカルインストールしたパッケージのコマンドを実行するためには、実行時にパス指定したり、package.jsonファイルにスクリプトを記述して実行するなどの対応が必要でした。
しかし、npm5.2.0でnpxコマンドが導入され、これらの対応は必要なくなりました。
例として、Gulpのタスクを実行する場合は、以下のように指定します。
>npx gulp {タスク名}

タスクの設定

Gulpのタスクは、プロジェクトのpackage.jsonファイルが作成されたディレクトリに、gulpfile.jsファイルを作成して定義します。

複数ディレクトリのCSSファイルとJavaScriptファイルを対象としてファイルの変更を監視し、ファイルが変更されたら元のファイルと同じディレクトリにgzip圧縮ファイルを生成する定義ファイルのサンプルは以下のようになります。
const { src, dest, watch } = require('gulp');
const gzip = require('gulp-gzip');

const GZIP_TARGET = [
	'./pathA/*.css',
	'./pathB/*.css',
	'./pathC/*.js',
];

exports.watch = function() {
	watch(GZIP_TARGET).on('change', function(path) {
		src(path, { base: '.' })
			.pipe(gzip())
			.pipe(dest('.'));
	});
}
複数ディレクトリのファイルを対象として出力先を同じディレクトリとするためには、src関数のbaseオプションとdest関数の出力先にカレントディレクトリを指定します。
変更されたファイルのパスはイベントハンドラーの第1引数に渡されます。
このサンプルではChokidarインスタンスを直接扱う記法としているため、非同期完了（コールバック）などにはアクセスできません。

タスクの実行

Gulpのタスクは、gulpfile.jsファイルを作成したディレクトリにおいて、gulpコマンドで実行します。

例として、「watch」というタスクを実行する場合は、以下のように指定します。

グローバルインストールの場合

>gulp watch

ローカルインストールの場合

>npx gulp watch
Gulpのwatch機能でファイルの変更を監視するタスクは、「Ctrl+C」で終了します。
当サイトでは、第三者配信による広告サービスを利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報（氏名、住所、メール アドレス、電話番号は含まれません）を使用することがあります。 このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。