古い Gulp を動かすのにハマったので、備忘録として書く。
構成
pug + scss + gulp + js（+ライブラリ）という懐かしい構成。
gulp で microCMS からコンテンツを取得して、html をビルドする仕組み。
GitHub Actions 使って Github 上で ubuntu で Node.js をインストールし、ビルドして S3 に sync。
microCMS API の Webhook か main ブランチにプッシュのどちらかがトリガーで、Actions が動くようになってます。
node のバージョンは Actions で v11.15.0 を指定。
yarn --frozen-lockfile
で yarn.lock の更新をしないようにしていました。
3年前くらいに動かしていた仕組みだったんですが、急遽使いたいってなって動かしたらビルドエラーが出てました。
何もしていないのに壊れた系（根本的な原因は不明）
エラー
error /home/runner/work/***/***/node_modules/node-sass: Command failed.
.....
gyp ERR! node -v v11.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.
gulp-node-sass が動かないって言われる。
エラーの内容としては node gyp のエラーで、python2 が無いって言われるんですが、node-sass の中身が古くて、中身をアップデートする node gyp が python3 で動かない。って感じなので、根本的には gulp-node-sass の問題と理解（当方ノンプログラマなので間違っていたらご指摘ください）
試したこと
python2 インストール するの GitHub Actions でできるのか？ → node-sass 使うのやめよう。
↓
gulp-node-sass -> gulp-dart-sass に変更 → gulp-dart-sass は node12 以上じゃないと動かない。
↓
node12 にする → node12 では gulp3 が 動かない
↓
gulp4 にする → gulp4 だと runSequence が動かない
↓
runSequence から gulp4-run-sequence にする → gulp3 で使ってた 第2引数 がそもそも使えないので、色々と記法を書き換える必要がある。
↓
めんどくさい。
で死にかけてました。
解決した方法
npm の gulp-sass ページ読んでいたら、使用していた gulp-sass のバージョンが v2系で、最終更新が 5.1.0 まで進んでいることに気がついたので。
package.json の
"gulp-sass": "^2.0.0" を "^4.0.0" に メジャーアップデートしたらビルド通りました。
なぜ通るようになったのかは不明です。
gulp-sass の最新（最終更新）は 5.1.0 ですが、5.0 以降は node 12以上が必要なので 4系までにしています。
gulp-sass@5.1.0: The engine "node" is incompatible with this module. Expected version ">=12"
感想
他の似たような時期に作ったプロジェクトでメンテナンスが必要な部分は、gulp4 と webpack に置き換えましたが、今回は API から取得してる部分と書き換える部分があるので。ちょっと躊躇しました。
この辺りの古いパッケージを動かすと、node のバージョンやらライブラリのバージョンやら、いろんなもののバージョンがぶつかって動かなくなるので。
node のバージョン下げたのに動かない！とかよくある話です。
レアケースかもしれませんが、どこかの誰かの参考になれば幸いです。
package.json
化石化したものをさらず。秘伝のタレ感がすごい…。
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"axios": "^0.19.2",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.24.7",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.0.1",
"gulp-babel": "^8.0.0",
"gulp-cache": "^0.4.2",
"gulp-clean-css": "^3.9.0",
"gulp-cssnano": "^2.0.0",
"gulp-eslint": "^3.0.0",
"gulp-filter": "^4.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-ignore": "^2.0.2",
"gulp-imagemin": "^3.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.0.1",
"gulp-pug": "^3.3.0",
"gulp-sass": "^4.0.0",
"gulp-sass-glob": "^1.0.9",
"gulp-sass-variables": "^1.2.0",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-strip-debug": "^1.1.0",
"gulp-typescript": "^4.0.1",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-webpack": "^1.5.0",
"merge-stream": "^2.0.0",
"minimist": "^1.2.0",
"npm": "^3.10.10",
"run-sequence": "^1.2.2",
"ts-loader": "6.0.4",
"typescript": "3.5.3",
"webpack": "4.38.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-stats-plugin": "^0.3.2",
"webpack-stream": "5.2.1"
},
"dependencies": {
"@bower_components/jquery": "jquery/jquery-dist#1",
"@bower_components/modernizr": "Modernizr/Modernizr#~2.8.1"
},
"volta": {
"node": "11.15.0"
}
参考にした記事