Gulp-Watch

Watchメソッドは、ソースファイルを監視するために使用されます。ソースファイルに変更が加えられると、ウォッチは適切なタスクを実行します。「デフォルト」タスクを使用して、HTML、CSS、およびJavaScriptファイルの変更を監視できます。

デフォルトタスクの更新

前の章では、デフォルトタスクを使用してリンクする方法を学びました：/gulp/gulp_combining_tasks [gulp結合タスク] gulp-minify-css、gulp-autoprefixer、gulp-concatpluginsを使用し、CSSファイルを縮小するスタイルタスクを作成しました。

CSSファイルを監視するには、次のコードに示すように「デフォルト」タスクを更新する必要があります。

gulp.task('default', ['styles'], function() {
  //watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
     //run styles upon changes
      gulp.run('styles');
   });
});

*work/src/styles/* フォルダーの下にあるすべてのCSSファイルが監視され、これらのファイルに変更が加えられると、スタイルタスクが実行されます。

デフォルトタスクの実行

次のコマンドを使用して「デフォルト」タスクを実行します。

gulp

上記のコマンドを実行すると、次の出力が表示されます。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

CSSファイルに変更が加えられるたびに、次の出力が表示されます。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

監視プロセスはアクティブなままで、変更に対応します。 * Ctrl + C *を押して監視プロセスを終了し、コマンドラインに戻ることができます。

Gulp-watch

Gulp-Watch

デフォルトタスクの更新

デフォルトタスクの実行