Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

gulpその0002 gulp.runが3.5からdeprecated(非推奨)になったそうなので具体的にどう書いたら良いかという話

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

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

watchの使い方について
これからはじめるGulp(3):gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers

環境

  • 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

はじめに

前回書いた記事と重複する部分が多いんだけど、非推奨になった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

とか、手前味噌ですが

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

を参考にすると良い感じ。

どのように書いたら良いのか (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ディレクトリの中に変更を加える度に実行される。

今回はここまで。