今年の頭にgulp4がリリースされたことは知っていました。
しかし、書き方がだいぶ変わるということでやや倦厭気味でした。とはいえ、半月ほど前にそろそろやらないと、と思い立ってついに3.9.1から4にアップデートしようと試みました。
ところが、そのときは結果として満足する動作に到達できず、一度は挫折しました。
今日何気なく再度チャレンジしたところ、あれだけ苦労したアップデートがそこそこすんなりとできてしまって拍子抜けしました……。半月前のあれは一体なんだったのか。
作業の上で気を付けたのは、巷でもよく言われている
- 完了フラグの通知（Streamをreturnするか、doneするか、callback呼ぶか）
- series, parallelへの書き換え
といった点は勿論ですが、一番苦労したのは
- browserSync後の各種ファイルのwatch→自動リロード
の部分でした。今回はそこを
- gulp.watchではなくgulp-watchプラグインを使用
- defaultタスクではなくbrowserSyncタスクに記述
という形で乗り切り、実装に至ることができました。ファイルのdiffは下記を参照。
ついでに今まで並列処理でwatchしていたためにリロードが複数回発生し、結果画面がちらついてしまう現象がずっとあったのですが、今回gulp.seriesで逐次処理にしたことで複数リロードを抑えることに成功という副産物も生まれました。
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリスの調査結果にあるように、フロントエンド界隈でのgulpは下火になっていることは分かっています。
かと言ってnpm scriptsによるワンライナー芸も自分にはちょっと厳しい、というところで同じような需要は少なからずあるような気がします。今回の自分がそうですが、そんな中でググってもあまり情報がなくて苦労したので、今回の件は備忘録として残しておきたいと思って筆を取った次第。