watch機能を使えばファイルの更新後に自動で処理を実行できる

前述の画像の圧縮処理について、画像が追加、変更される度にタスクを手動で実行するのは面倒です。タスクランナーには、ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能があり、もちろんGulpでも使えます。

Gulpのwatchの説明

watch機能を使って画像ファイルを自動圧縮してみよう

「監視画像ファイルに変更があった場合に、自動的に圧縮して別フォルダー保存するタスク」を例に紹介してみます。実際にタスクが動作している様子が下記動画です。監視ファイルがimagesフォルダー以下で、圧縮画像はminified_imagesフォルダーに格納されます。

watch機能で使用するのがwatch()メソッドで、「監視するファイル」に変更があった場合、設定された「処理」が実行されます。

  • gulp.watch("監視するファイル", 処理)

watch()メソッドを使って前述のタスクを実行するのが次のコードです。

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
gulp.task("watchTask", function() {
  // imagesフォルダー以下のファイルを監視
  gulp.watch("images/**", function() {
    gulp.src("images/*.png")
      .pipe(imagemin())
      .pipe(gulp.dest("minified_images"));
  });
});

タスクを実行すると、画像ファイルの監視と自動圧縮が始まります。なお、ファイルの監視を終了する場合は、コマンドラインでCtrlCキーを同時に押します。

gulp watchTask

タスクランナーGulpを積極的に使いこなそう

開発者の負担を減らすGulpは、導入もタスクの作成も簡単です。今回紹介した基本的なことを抑えておけば、開発目的に応じたタスクを柔軟に作成することができます

今回はGulp入門の内容でしたが、続編記事「最低限抑えておきたいタスクランナーの書き方まとめ (GruntとGulpの両方のコードを掲載)」ではGulpを使いこなすためのTipsを、「ブラウザ確認が一瞬! Grunt・Gulpと始めるBrowserSync入門」ではブラウザ確認を楽にするBrowserSyncとの連携を解説しています。是非この機会にタスクランナーの便利さに触れてみてください。

オンライン動画で、もっと丁寧に解説してます

161215_schoo_gulp

また筆者は無料動画学習のSchoo(スクー)で「Gulp入門(全3回)」の講師をしています。Schooの授業では、一つ一つの手順を詳しく動画で解説しているので、コマンドラインが不慣れな方でも安心して学習できます。もし、この記事でわからなかったことや、現場での使い方を知りたい方はご覧くださいませ。

(編集部注*この記事は2014年10月31日に公開された記事を再編集したものです)