gulpのv3→v4の移行忘れで辛かったサイト改修
Closedfirst published: 2019/01/25last updated: 2019/02/11
前回、問い合わせフォームを削るだけの予定だったのに、gulpの設定が色々と古すぎて意外と苦労した話。まさか、自サイトが最古のコードになるとは思っておらず、それだけ優先順位が低かったことを実感。
MacBookを買い換えてからローカルにリポジトリがなかったのでclone。gulpはv3.9.1で止まってる。npm scriptの使い方も知らなかった。とりあえずyarnしてチャチャっと修正してしまおう。
ReferenceError: internalBinding is not defined動かない...。多分、この頃はNode.jsのバージョンがv8とかだったので、グローバルにv11.4.0入れてるから動かないのだろう。ndenvで古いバージョンへ切り替えれば動くはず。試しにv8.15.0を使ってみる。
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x
Found bindings for the following environments:
- OS X 64-bit with Unsupported runtime (67)
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.動かない...。あー、node-sassね。Node.jsによってインストール時の設定変わってるからリビルドしてくれと。
$ npm rebuild node-sassはい、これで動いた。
いやしかし、このまま古いgulpが残ってるのも気持ち悪い。v4がlatestに上がったし。これを機にバージョンアップしとこう（Node.jsをv11に戻したのでnode-sassは再びリビルドした）。
$ yarn upgrade-interactive --latestError: Cannot find module '@babel/core'動かない。あ、babelを交換しないといけないんだったか？
yarn add -D @babel/core @babel/preset-env
yarn remove babel-core babel-preset-envgulpfile.jsの env を @babel/preset-env に変更。
AssertionError [ERR_ASSERTION]: Task function must be specified動かず。そりゃそうだ。gulp本体の変更をgulpfile.jsに反映していない。
gulpfile.js
Before
// Browser Sync
gulp.task('browser-sync', () => {
browserSync({
server: {
baseDir: paths.out_html
}
});
gulp.watch(paths.out_html + '**/*.html', ['reload']);
gulp.watch(paths.out_css + '**/*.min.css', ['reload']);
gulp.watch(paths.out_js + '**/*.min.js', ['reload']);
gulp.watch(paths.out_img + '*', ['reload']);
});
gulp.task('reload', () => {
browserSync.reload();
});
// Watch
gulp.task('watch', () => {
gulp.watch([paths.src_pug + '**/*.pug', '!' + paths.src_pug + '**/_*.pug'], ['pug']);
gulp.watch(paths.src_scss + '**/*.scss', ['scss']);
gulp.watch(paths.src_js + '**/*.js', ['jsconcat']);
gulp.watch(paths.src_img + '*', ['imagemin']);
gulp.watch([paths.out_css + '**/*.css', '!' + paths.out_css + '**/*.min.css'], ['cssmin']);
gulp.watch([paths.out_js + '**/*.js', '!' + paths.out_js + '**/*.min.js'], ['jsuglify']);
});
gulp.task('default', ['browser-sync', 'watch']);After
// Browser Sync
gulp.task("browser-sync", function(done) {
browserSync({
server: {
baseDir: paths.out_html
}
})
done()
})
gulp.task("reload", function(done) {
browserSync.reload()
done()
})
// Watch
gulp.task("watch", () => {
gulp.watch(
[paths.src_pug + "**/*.pug", "!" + paths.src_pug + "**/_*.pug"],
gulp.series("pug", "reload")
)
gulp.watch(paths.src_scss + "**/*.scss", gulp.series("scss", "reload"))
gulp.watch(paths.src_js + "**/*.js", gulp.series("jsconcat", "reload"))
gulp.watch(paths.src_img + "*", gulp.series("imagemin", "reload"))
gulp.watch(
[paths.out_css + "**/*.css", "!" + paths.out_css + "**/*.min.css"],
gulp.series("cssmin", "reload")
)
gulp.watch(
[paths.out_js + "**/*.js", "!" + paths.out_js + "**/*.min.js"],
gulp.series("jsuglify", "reload")
)
})
gulp.task("default", gulp.parallel("browser-sync", "watch"))直列処理（修正した後リロードとか）は gulp.series に、並列処理させるところは gulp.parallel に変更すれば動く。あと、browserSyncにdoneを返すとか。
最近触らなくなったpugは特に違和感なく使えたけど、ビルドが自動化されていない・データがJSONに集約されていない・変数が整理されていない点は気になった。ただ、そこまで手を付けるならサイトを作り直したい。
こういったバージョンの遅れやこだわりが原因で、クリエイターのサイトやポートフォリオは更新が止まったりするんだろうなーと思った。今回は問い合わせフォーム削りたかっただけなのに色々やってしまった...。