参考にさせて頂いたページ
gulp 3.5でgulp.runがdeprecatedになりました | Web Scratch
watchの使い方について
これからはじめるGulp(3):gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers
環境
はじめに
前回書いた記事と重複する部分が多いんだけど、非推奨になったgulp.runと比べるという意味で書いています。
私は特にwatchする書き方で、eventの取得方法がわからず苦労していました。
gulp.runを使用すると表示されるメッセージ
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
動かないわけではないけど非推奨になった。
どのように書いたら良いのか (watchせずに一度だけ実行する場合)
例えば以下のような感じでgulp.runを使って書いていたものを
//gulp.runを使っていたときの書き方
gulp.task('aaaaa', function (){
gulp.run('bbbbb');
gulp.run('ccccc');
console.log('hoge');
});
以下のような感じで、第二引数に配列で渡してあげる。
//現在推奨される書き方
gulp.task('aaaaa', ['bbbbb', 'ccccc'], function(){
console.log('hoge');
}
タスクbbbbbとcccccの内容は割愛
処理される順番
まずコマンドラインから
gulp aaaaa
を実行すると
- タスクbbbbb
- タスクccccc
- console.log('hoge')
の順番で実行開始される。
いずれの書き方もbbbbbの完了を待つわけではなく、非同期にcccccも実行開始されると思う。
bbbbbの完了を待ってから、cccccを実行した場合は
JavaScript - gulpのタスクを同期的に実行する方法 - Qiita
とか、手前味噌ですが
を参考にすると良い感じ。
どのように書いたら良いのか (watchしてイベント発生時に実行する場合)
gulp.runを使わずにwatchする書き方は以下のような感じ
//watchする
gulp.task('aaaaa', function (){
gulp.watch('example/*.*', ['bbbbb','ccccc','ddddd'])
.on('change', function(event){
console.log('bbbbbよりも先に実行される処理で、event.pathなどがここで使える');
console.log(event.type);
console.log(event.path);
});
});
//bbbbb
gulp.task('bbbbb', function (){
console.log('hoge_bbbbb');
});
//ccccc
gulp.task('ccccc', function (){
console.log('hoge_ccccc');
});
//ddddd
gulp.task('ddddd', function (){
console.log('hoge');
});
みたいな感じ。
処理される順番
まずコマンドラインから
gulp aaaaa
を実行すると監視状態になるので、exampleディレクトリの中に変更を加えると以下の順番で実行される。
- on('change', function(event){ / ここを実行 / })
- タスクbbbbb
- タスクccccc
- タスクddddd
以降もexampleディレクトリの中に変更を加える度に実行される。
今回はここまで。