【自分備忘録】gulp4まとめ（ざっくり） #gulp

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

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

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

書き換え前のgulpfile.js

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

書き換え後のgulpfile.js

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。

gulpfile.js

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を入れてる感じで作ってます。

/gulpfile.js/taskA.js

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

/gulpfile.js/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が同時に実行される。

まとめ

どうなんだろう…慣れれば結構書きやすいのかな(゜゜)
タスクを別ファイルで管理するのも、今まではモジュール追加しないとできなかったけど、それがgulpだけでできるのは良さそう。
あと、プライベートタスクとパブリックタスクって分かれてるのは、不用意にコマンド叩くことを防げるので良いかもしれないって思った(゜゜)

【自分備忘録】gulp4まとめ（ざっくり）