久々にGulpを触ったら、エラーが出てしまったときの対処法

リモートワークになって、家でもgulpの作業環境を整えようとして、Node.jsを入れて、プロジェクトをクローンしていざ「gulp」コマンドを叩いたら変なエラーがでました。

ReferenceError: primordials is not defined

うん、わかんない。調べるとNode.jsとgulpのバージョン組み合わせがよくない為のエラーらしい。

gulpのバージョンを上げる（3→4)

解決方法は、Nodeのバージョンを下げるか、Gulpのバージョンを上げるからしいので、下記の記事を参考にGulpのバージョンを上げる。

Gulp実行エラー[ReferenceError: primordials is not defined]を解決した方法 - Qiita

package.json書き換え

"devDependencies": {
   .....略......
   "gulp": "^4.0.2",
 }

上記のように、gulpのバージョン書き換え。
そして、いよいよgulp実行！

したら、下記のエラーが！

Task function must be specified

これは、gulpの書き方が新しいお作法に書かれていないよって印らしい。

gulp4.0に対応した書き方に修正

gulp4.0になってから、推奨している書き方はあるらしいです。しかし、急いでいたのでとりあえず簡単な方法でエラーを消せればよいと思い、ヤッテモータースさんと同様の方法で1部分だけ直す方法で対処。

gulp4.0に対応したgulpfile.jsの書き方はたった一箇所を変更するだけでOK！ | ヤッテモータース

gulp.watch('scss/*.scss', ['sass']);

「gulp.task()」を追加する

gulp.watch('scss/*.scss', gulp.task('sass'));

これで、一応gulpタスクの実行が無事出来ました！

browserSyncの不具合を解消

ところが、browserSyncがうまくいってないことに気付きました。初回と2回目のリロードはちゃんとできるんですが、それ以降は全くリロードせず。

そこで、同じような悩みがteratailにあり、下記の解決方法を享受いただき、無事解消！

gulp.task("reload", function () {
 browserSync.reload();
});

下記のように変更。

gulp.task("reload", function (done) {
 browserSync.reload();
 done();
});

gulp 4 で browser-sync が、1度しかリロードしない。｜teratail

今日も多くの人たちの力を借りて、問題を解消しました。同じようにつまづいた人の参考になれば幸いです。