読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

gulpその0001 gulp.watchでディレクトリ監視をしながら、そのevent.typeとevent.pathを取得して、watchの第二引数に指定して同期的に実行しているタスクの中でeventを使用する

参考にさせて頂いたページ

gulp.watchによる監視と、.on()によるevent取得、イベントリスナーの利用など。
これからはじめるGulp(3):gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers

gulp 3.5でgulp.runがdeprecatedになったそうです
gulp 3.5でgulp.runがdeprecatedになりました | Web Scratch

同期的にタスクを実行する方法(指定した順番に処理完了を待ってから次のタスクを実行する方法)
JavaScript - gulpのタスクを同期的に実行する方法 - Qiita

簡単に同期・非同期でタスクを実行するためのプラグイン gulp-run-sequence CoffeeScript - Gulp でタスクを並列/直列処理する - Qiita

環境

  • Mac OS X 10.7.5
  • node v0.11.13
  • npm 2.7.0
  • gulp CLI version 3.8.0
  • gulp Local version 3.8.11

gulpfile.jsの記述内容

/*
 * gulpプラグイン読み込み
 */
var gulp        = require('gulp');

/*
 * グローバル変数
 */
 eventObj;

/*
 * タスク
 */
//深度1のタスク watchする
gulp.task('lv1', function (){
  gulp.watch('example/*.*', ['lv2'])
    .on('change', function(event){
      eventObj = event;
      console.log('event.typeは'+event.type);//イベントタイプを出力(chenged,added,deletedなど)
      console.log('event.pathは'+event.path);//イベントパスを出力
    });
});

//深度2のタスク
gulp.task('lv2', ['lv3_1','lv3_2'], function (callback){
  console.log('lv2実行中。');
  console.log('eventObj.typeは'+eventObj.type);//イベントタイプを出力(chenged,added,deletedなど)
  console.log('eventObj.pathは'+eventObj.path);//イベントパスを出力
  callback();//処理完了をlv1に知らせる
});

//深度3のタスク その1
gulp.task('lv3_1', function (callback){
  console.log('lv3 その1 実行中。');
  callback();//処理完了をlv2に知らせる
});

//深度3のタスク その2
gulp.task('lv3_2', function (callback){
  console.log('lv3 その2 実行中。');
  callback();//処理完了をlv2に知らせる
});

ディレクトリ構造

以下のような感じで、exampleディレクトリを監視して、example.txtを変更したりする。

.
├── example
│   └── example.txt
├── gulpfile.js
├── node_modules
│   └── gulp
└── package.json

実行と結果

コマンド

gulp lv1

を実行すると

[10:59:26] Using gulpfile ~/Desktop/all/npm_gulp_0001/gulpfile.js
[10:59:26] Starting 'lv1'...
[10:59:27] Finished 'lv1' after 43 ms

みたいな感じになる

試しにexample.txtを複製してみると

event.typeはadded
event.pathは/Users/motomichishigeru/Desktop/all/npm_gulp_0001/example/example のコピー.txt
[11:02:46] Starting 'lv3_1'...
lv3 その1 実行中。
[11:02:46] Finished 'lv3_1' after 156 μs
[11:02:46] Starting 'lv3_2'...
lv3 その2 実行中。
[11:02:46] Finished 'lv3_2' after 91 μs
[11:02:46] Starting 'lv2'...
lv2実行中。
eventObj.typeはadded
eventObj.pathは/Users/motomichishigeru/Desktop/all/npm_gulp_0001/example/example のコピー.txt
[11:02:46] Finished 'lv2' after 245 μs

と表示された。

ファイルが追加された事と、同期的にタスクが実行されている事がわかります。

gulp-run-sequenceについて

いまのところ私がインストールしたバージョンは"gulp-run-sequence": "^0.3.2",であり、中でgulp.runが使用されているので、

gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.

のメッセージが出るんだけど、gulpfile.jsのコードの見通しは良くなるなぁ。と思う。
何かこれに代わるものはないかな。

おわりに

gulp 3.5でgulp.runがdeprecatedになりました

 

とのことで、どうやって書いたら良いのか。みたいなことからここにたどり着くまでけっこう大変だった。

  • gulp.watchとイベントの取得
  • 同期的にタスクを実行する

の二つに記事をわけても良かったんだけど、ちょうど業務でやりたいのがこんなような事だったのでまとめて書いた。

実用的っぽい。

同期的に実行しているタスクの中で、event.pathなどを使うのに、グローバル変数使わなくて済む方法がわからない。

これでイベントを発生させたファイル名や拡張子がわかるので、sassのコンパイルとか、gulp.spritesmithを実行したり、完成したcsspngをdestするのも簡単そう。

とりあえず今回はここまで。