はじめに
前回はgulpのseriesとparallelという機能を使って複数コマンドを実行させるところまで説明しました。
まだの方はこちらを参照してください。
今回はgulpのwatchという機能を使って任意のファイルを監視してタスクを実行させるやり方を説明していきます。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではwatchの使い方に移ります。
watchとは
watch機能は任意のファイルやフォルダを監視し、変更があったらタスクを実行してくれる機能になります。
何らかのファイルを変更した場合に、その都度手を止めてgulpのコマンドを実行するのは面倒ですよね。
watch機能を使えば一度実行すると勝手にファイルの変更を検出してくれて自動でコマンドを実行してくれるようになります。
ディレクトリ構成
基本的には前回のディレクトリ構成と同じになります。
またsrcフォルダの中にindex1.html index2.html index3.html を作成します。
test
├ node_modules
├ dist
├ src
│ ├ index1.html
│ ├ index2.html
│ └ index3.html
├ gulpfile.js
├ package-lock.json
└ package.json今回のゴールは以下です。
gulpのコマンドを実行してファイルの変更を検出するとdistフォルダの中にsrcフォルダのindex1.html index2.html index3.html をコピーする
gulpfile.jsを編集する
まずは完成形を記載しておきます。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function copy1(done) {
src("./src/index1.html")
.pipe(dest("./dist/"));
done();
}
function copy2(done) {
src("./src/index2.html")
.pipe(dest("./dist/"));
done();
}
function copy3(done) {
src("./src/index3.html")
.pipe(dest("./dist/"));
done();
}
//----------------------------------------------------------------------
// watch関数定義
//----------------------------------------------------------------------
function watchTask(done) {
// watch( "監視したいファイル(またはフォルダ)を指定" , 処理 );
watch("./src/**" , series(copy2,copy3));
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.watch = series(copy1,watchTask);
/************************************************************************/
/* END OF FILE */
/************************************************************************/それではセクションごとに説明していきます。
関数定義
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function copy1(done) {
src("./src/index1.html")
.pipe(dest("./dist/"));
done();
}
function copy2(done) {
src("./src/index2.html")
.pipe(dest("./dist/"));
done();
}
function copy3(done) {
src("./src/index3.html")
.pipe(dest("./dist/"));
done();
}関数の定義をしています。
念のためそれぞれの関数の処理内容を以下にまとめておきます。
| 関数名 | 処理内容 |
| copy1 | index1.htmlをdistフォルダへコピー |
| copy2 | index2.htmlをdistフォルダへコピー |
| copy3 | index3.htmlをdistフォルダへコピー |
watch関数定義
//----------------------------------------------------------------------
// watch関数定義
//----------------------------------------------------------------------
function watchTask(done) {
// watch( "監視したいファイル(またはフォルダ)を指定" , 処理 );
watch("./src/**" , series(copy2,copy3));
}watch機能を使った関数を定義しています。
watch機能には以下2つを指定します。
ここではsrcフォルダ のいずれかが変更されるとcopy2タスク copy3タスク が実行されるようにしています。
タスク定義
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.watch = series(copy1,watchTask);実行するコマンドを「watch」としました。
「watch」コマンドを実行すると、「copy1」タスクと「watchTask」タスクを実行します。
「copy1」タスクを実行してから、ファイルの監視を始めます。
コマンドを実行しよう
それではgulpでwatchコマンドを実行しましょう。
npx gulp watch「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のように「copy1」タスクは実行完了していますが、「watchTask」タスクは完了せず監視状態に入ります。
[00:00:00] Starting 'watch'...
[00:00:00] Starting 'copy1'...
[00:00:00] Finished 'copy1' after 14 ms
[00:00:00] Starting 'watchTask'...正しくwatch機能が働いています。
この状態でsrcフォルダ のいずれかのファイルを変更してみましょう。
以下のように変更を検出してタスクが実行されるはずです。
[00:00:00] Starting 'copy2'...
[00:00:00] Finished 'copy2' after 6.37 ms
[00:00:00] Starting 'copy3'...
[00:00:00] Finished 'copy3' after 2.66 mswatch機能を終了させる
watch機能を使ってファイル監視をする方法について説明しました。
ファイル監視を終了させたい場合は以下のコマンドをターミナルで入力してください。
- 「Ctrl」 + 「c」キー
- 「y」 キー
それではファイル監視を終了させていきましょう。
ターミナルで「Ctrl」 + 「c」キーを入力すると以下のような表示がされます。
^Cバッチ ジョブを終了しますか (Y/N)?「y」キーを入力してファイル監視を終了させましょう。
^Cバッチ ジョブを終了しますか (Y/N)? yおわりに
以上gulpのwatchという機能を使って任意のファイルを監視してタスクを実行させるやり方を説明しました。
いかがだったでしょうか。
watch機能を上手に使えば面倒な作業もgulp側で勝手に処理してくれるので非常に便利になります。
コメント