BETA

gulp4まとめ(ざっくり)

投稿日:2019-11-08
最終更新:2019-11-08

※Qiitaのクロス投稿になります(Qiitaの記事はこちら

gulp3からgulp4にバージョンアップして、そのときに詰まったところやら、「そもそも書き方全然変わってるー」ってのをざっくり書きます!

gulp.task()が非推奨になったので書き換える

書きやすかったのにー(゜゜)

書き換え前が下記。

gulp.task('taskA', () => {  
  // 処理  
})  

書き換え後が下記。

const taskA = callback => {  
  // 処理  
  callback()  
}  
// もしくは  
const taskA = callback => {  
  return 処理  
}  

returnまたはコールバックしてあげないと、エラーが出る

returnもしくはコールバック関数で、ちゃんとタスクが完了したことをお知らせしてあげないと、

The following tasks did not complete
Did you forget to signal async completion?

ってな感じで、エラーが返ってきてしまうので、必ずreturnするかコールバックしてあげないといけない。

gulpコマンドでタスクを実行させるにはもうひと手間必要

gulp4からは、コマンド実行用のタスクとコマンドで実行できないタスクと分かれるらしい。

  • Public tasks(gulpfileからエクスポートされるため、gulpコマンドで実行可能)
  • Private tasks(内部で使用される用。gulpコマンドで実行不可能)

詳細はこちら→Creating Tasks
ってことで、関数として定義しただけでは、Private tasksになるので、gulpfile.jsでちゃんとexportsしてあげればOK。

const taskA = callback => {  
  // 処理を記述  
  callback()  
}  
exports.taskA = taskA  

これで、初めてgulpコマンドで実行可能になる。

タスクを別ファイルに分ける

gulpfile.jsにたくさん書いていくとどんどん肥大化していくので、別ファイルに分けたい…!
そんなときは、gulpfile.jsというディレクトリを作り、その中にindex.jsを作成。
あとは、タスクを書いたjsファイルをぽこぽこ増やせばOK。

project  
├ gulpfile.js[ディレクトリ]  
│   ├ tasks[ディレクトリ]  
│   │   ├ taskA.js   
│   │   └ taskB.js   
│   └ index.js  
├ node_modules[ディレクトリ]  
└ package.json  

ちなみに自分は、gulpfile.jsディレクトリの中にさらにtaskディレクトリを作って、その中にタスク書いたjsを入れてる感じで作ってます。

taskA.js

const taskA = callback => {  
  // 処理を記述  
  callback()  
}  
exports.taskA = taskA  

index.jsはこんな感じ。

const { taskA } = require('./taskA')  
exports.taskA = taskA  

公式ドキュメントにも載ってるー。
JavaScript and Gulpfiles

タスクを直列/並列に処理する

複数のタスクを実行させるとき、順番通りに実行したいか、並列で実行させたいかってのがあるはず。
gulp3のときはrun-sequenceってnode_moduleを利用して、その対応を行っていたけど、gulp4からはデフォルトでそのメソッドが入っているそうな

gulp.series()

タスクを直列処理するメソッド。

const gulp = require('gulp')  
const { taskA } = require('./taskA')  
const { taskB } = require('./taskB')  

exports.default = gulp.series(taskA, taskB)  

gulp defaultコマンドを実行すると、taskAが実行、それが終わるとtaskBが実行される。

gulp.parallel()

タスクを並列処理するメソッド。

const gulp = require('gulp')  
const { taskA } = require('./taskA')  
const { taskB } = require('./taskB')  

exports.default = gulp.parallel(taskA, taskB)  

gulp defaultコマンドを実行すると、taskAとtaskBが同時に実行される。

seriesとparallelの合わせ技

もちろん合わせることも可能!

const gulp = require('gulp')  
const { taskA } = require('./taskA')  
const { taskB } = require('./taskB')  
const { taskC } = require('./taskC')  

exports.default = gulp.series(  
  taskA,  
  gulp.parallel(taskB, taskC)  
)  

この場合、gulp defaultコマンドを実行すると、taskAが実行された後、taskBとtaskCが同時に実行される。

まとめ

どうなんだろう…慣れれば結構書きやすいのかな(゜゜)
プライベートタスクとパブリックタスクって分かれてるのは、不用意にコマンド叩くことを防げるので良いかもしれないって思った(゜゜)

参考になりました、ありがとうございますなサイトさん

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

自分の備忘録として殴り書く!!

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう