ファイルの変更を監視してGulpタスクを自動実行する方法 (gulp.watch / gulp-watch) |

概要

　WEB制作における様々な作業を自動化してくれる Gulp はとても便利です。しかし、HTML, CSS, JavaScript などのファイルを少し変更する度にいちいち Gulp のタスクをコマンドラインから手動で実行するのは面倒です。そこで便利なのが、ファイルの更新を監視して自動的に Gulp のタスクを実行してくれる watch 機能です。本稿では Gulp の watch 機能を利用して、ファイルを更新した際に自動的にタスクが実行されるような方法について解説します。

Gulp.watch メソッド

　Gulp にはファイルの更新を監視してくれる Gulp.watch メソッドが標準であります(＝別途モジュールを用意する必要はありません)。ファイルが更新されたことを検知すると、指定されたタスクを自動的に実行してくれます。 watch は次のような引数を与えて呼び出します。

gulp.watch(監視する対象ファイル, ファイルが更新された時に実行するタスク名)

　この watch メソッドを呼び出すと Gulp がずっと実行された状態になりますので、ファイルの監視を終了させるには Ctrl + C キーをタイプします。

簡単な例で試してみよう

　文章だけではなかなか伝わりづらいと思いますので、簡単な Gulp タスクを作って試してみましょう。ここでは次のようなフォルダ構成で、ファイルをコピーするだけのタスクで考えてみます。ファイル src/sample.js を dest/sample.js としてコピーするだけのタスクを考えます。まずは次の構成になるように、ファイルを作ってください。


/プロジェクト

　├ /src

　│　└ sample.js ← このファイルをコピーする

　│

　└ /dest ← このフォルダにファイルをコピーする

　このファイルをコピーするだけのタスクを gulpfile.js にタスクとして書くと、次のようになります。ここでは src フォルダ内の .js ファイルをコピーするように指定しています。 (この時点では、まだ Gulp.watch を利用していません)


var gulp = require("gulp");



gulp.task("copy", function() {

    return gulp.src('src/*.js')

        .pipe(gulp.dest('dest/'));

});

　さて、ここで本題です。ファイル src/sample.js を変更すると自動的に上記の copy タスクを実行してくれるようにすることを考えます。それには、次のように gulpfile.js を編集します。(末尾3行、watch という名前でタスクを追加しています)


var gulp = require("gulp");



gulp.task("copy", function() {

    return gulp.src('src/*.js')

        .pipe(gulp.dest('dest/'));

});



gulp.task("watch", function() {

    return gulp.watch('src/*.js', ['copy']);

});

　上のように watch タスクを追加したら、gulp を実行してみましょう。ここでは npx gulp タスク名コマンドで実行しています。タスク名は watch です。


$ npx gulp watch

[14:56:08] Using gulpfile ~/Desktop/gulp-playground/gulpfile.js

[14:56:08] Starting 'watch'...

[14:56:08] Finished 'watch' after 9.15 ms

　実行すると上の例のように処理が始まり、gulp が実行されたままの状態になります。ファイルを監視する処理がずっと動き続けます。それではコンソールはこのままで、テキストエディタでファイル src/sample.js を編集して保存してみましょう。保存したら dest/sample.js の中身を確認してみてください。 src/sample.js に加えた修正が反映されているのが確認できると思います。

　どうでしょうか？自動的にタスクが実行されたことを確認できたでしょうか？なお、ファイルの監視を終了するには Ctrl + C で Gulp の実行を終了させます。

gulp.watch で不便な点

　このように「タスクの実行」を自動化してくれる watch 機能はとても便利なのですが、1つ不便な点があります。上の watch タスクを実行した状態で src フォルダに新しい .js ファイルを追加してみてください。上の例では監視対象を src/*.js と指定しているので、新しく追加した .js ファイルを検知してくれても良いのに、残念ながら検知してくれません。 (2018年08月現在) そこで、その不便な点を解決してくれるのが、gulp.watch を拡張した gulp-watch モジュールです。

gulp-watch モジュール

　上記のように標準の gulp.watch を拡張したような機能を提供するのが gulp-watch モジュールです。標準の gulp.watch では使いづらいと感じた場合には、こちらを利用してみると良いでしょう。

インストール

　プロジェクトの依存ライブラリに Gulp に加えて gulp-watch を追加してください。

$ npm install --save-dev gulp-watch

gulpfile.js

　gulp-watch を利用する場合は、次のように gulpfile.js を書きます。 gulp-watch モジュールにより watch() メソッドが利用できるようになります。


var gulp  = require("gulp");

var watch = require('gulp-watch');



gulp.task("copy", function() {

    return gulp.src('src/*.js')

        .pipe(gulp.dest('dest/'));

});



gulp.task("watch", function() {

    return watch('src/*.js', function() {

        gulp.start(['copy']);

    });

});

　あとは上記と同様に watch タスクを実行するとファイルの監視が始まり、今度は src フォルダに新しくファイルを作った際に dest フォルダにそれが反映されるようになります。