参考にさせて頂いたページ
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
環境
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を実行したり、完成したcssやpngをdestするのも簡単そう。
とりあえず今回はここまで。
