favicon設置で詰まった話｜Gitブランチ・node_modules・gulpの備忘録
こんにちは。いっきー(@ikirin_web)です。
※ GitHubを途中から導入した経緯はこちらの記事に書いています。→ VS Codeでファイルが消えた話｜ローカル履歴機能に救われました
FVのコーディングを始めようと、FigmaからFV用の画像素材をダウンロードしていました。
そのとき「そういえばfaviconもまだ設置していなかった」と思い出して、ついでにダウンロードしてそのまま作業開始。
「faviconの設置なんてすぐ終わるでしょ」
…と思っていたのですが、そこからが長かったです。
- ブランチを切り忘れてmainで作業を始めてしまっていた
- commitする前なら途中からブランチを切り直せることを知らなかった
- node_modulesが壊れて
watchが動かなくなった - やっとgulpが動いたと思ったらfaviconが表示されない
- 原因は
{encoding: false}の設定漏れだった
「すぐ終わる」と思っていた作業で、Gitの運用・エラーの読み方・gulpの仕組みまで一気に学ぶことになりました。同じところで詰まっている方の参考になれば幸いです。
環境
- Gulp 5
- Node.js v18
- Sass（Dart Sass）
- FLOCSS構成
ブランチを切り忘れても、commitする前なら間に合う
最初の詰まりはGitのブランチ運用でした。
faviconやFV用の画像をVS Codeにアップロードしている途中で「あ、ブランチ切ってなかった」と気づきました。mainで作業してしまっている状態です。
焦ったのですが、commitする前であればその場でブランチを作って移れます。
① 現在地を確認する
git status
mainにいることが確認できたら次に進みます。
② ブランチを切る
git switch -c feature/任意の名前をつけてください
「-c」は、createという意味。つまり新しいブランチを作って「feature/任意の名前をつけてください」へ移動するってことです。
③ ステージングにあげる
git add ファイル名
④ コミットする
git commit -m "自分が行った作業を端的に記述"
これでfeature/任意の名前のcommitとして記録されます。
なぜこれで大丈夫なのか
ブランチを切ったら変更が移動するわけではありません。commitしていない変更はまだどのブランチにも属していない状態なので、git switch -cでブランチを作った後にaddしてcommitすれば、そのブランチのcommitとして記録されます。
commitする前なら間に合うというのは、この仕組みが理由です。
ターミナルのエラー文は3点を見る（node_modulesが壊れた）
node_modulesが壊れていたときに、長いエラー文を見てパニックになりました。
実際に出たエラーがこちらです。
Error: Cannot find module 'y18n/build/index.cjs'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1177:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:1165:15)
...
code: 'MODULE_NOT_FOUND',
長く見えますが、見るべき場所は3点だけです。
① 一番最初の行を見る
Error: Cannot find module ‘y18n/build/index.cjs’
「何が起きたか」が書いてあります。まずここだけ読む。
② code:を探す
code: ‘MODULE_NOT_FOUND’
「エラーの種類」が書いてあります。これをそのままGoogleで検索するだけで解決策が見つかることが多いです。
③ atの一番上を見る
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1177:15)
「どこで起きたか」が書いてあります。ずらずら並んでいるatの行は上から1行だけ見ればOKです。
- 何が起きた → 最初の行
- エラーの種類 → code:
- どこで起きた → atの一番上
全部読もうとしなくて大丈夫です。上の3〜5行に答えが詰まっています。
node_modulesが壊れたときの対処法
エラーの種類がMODULE_NOT_FOUNDだった場合、node_modulesが不完全な状態になっている可能性があります。
まずy18nフォルダがあるか確認します。
ls node_modules/y18n
次にbuildフォルダがあるか確認します。
ls node_modules/y18n/build
存在しない場合、インストールが中途半端に終わっています。
対処はシンプルです。
① node_modulesを削除
rm -rf node_modules
VS Code上で右クリック削除でも大丈夫です。
② パッケージを再インストール
npm install
node_modulesはなぜ壊れるのか
- インストール中にPCがスリープした
- Node.jsのバージョンと依存パッケージが合っていない
- ファイル数が膨大なため途中で止まりやすい
node_modulesは、壊れたら迷わず再生成する消耗品です。package-lock.jsonさえあれば完全に復元できます。
package-lock.json → 残しておく（バージョン情報が記録されている）
faviconのGulp設定で詰まった話
gulp.jsで、faviconをコピーしようと考えてタスクを作成しました。でも何度やっても画像が壊れて表示されていました。
原因はGulp5からバイナリファイル（画像・icoなど）は{encoding: false}の指定が必要になったことでした。
// × これだと壊れる
gulp.src("./src/画像ファイル")
.pipe(gulp.dest("./出力先/"))
// ◯ {encoding: false}を追加する
gulp.src("./src/画像ファイル", {encoding: false})
.pipe(gulp.dest("./出力先/"))
自動生成フォルダをGit管理対象から外すには
自動生成されるフォルダ（public / dist）は.gitignoreに追加するものだと知らずpushしていました。
そのため、そのままGit管理対象になっていました。
その追跡を外すための手順を次に紹介していきます。
pushしてしまっても遅くない
.gitignoreに追加するだけでは解決しません。すでに追跡対象になっているファイルには.gitignoreが効かないからです。
以下の手順で対応します。
① Gitの追跡対象から外す（ファイル自体は消えない）
git rm -r --cached 本番フォルダ名/
② .gitignoreに本番フォルダを追加
③ ステージングにあげる
git add .gitignore
④ commitする
git commit -m "fix: .gitignoreに（本番のフォルダ名）を追加しGit管理対象から除外"
⑤ いつものフローでpushまで進める
このブログ最後に「おまけ：基本的なブランチ運用フロー」を追加しています。⑦〜⑨を参照してください。
まとめ：今回学んだこと
① commitする前なら、ブランチ切り忘れは間に合う
commitしていない変更はどのブランチにいても存在しているという仕組みを知っておくと焦らなくなります。
② エラー文は3点だけ見る
最初の行・code:・atの一番上。全部読もうとしない。
③ node_modulesは消耗品
壊れたらrm -rf node_modules → npm installで再生成。package-lock.jsonは残す。
④ gulpのコピータスクはencodingに注意
Gulp5からバイナリファイルは{encoding: false}が必要。答えはgulpfile.jsのコメントの中にありました。
⑤ .gitignoreのやり直しも遅くない
すでにpushしてしまっている場合はgit rm -r --cachedで追跡を外してから.gitignoreに追加する。
小さなつまずきの連続でしたが、Gitの運用・gulpの仕組み・エラーの読み方まで理解が深まりました。最初からGitを導入していれば…という後悔はありますが、途中からでも始めて良かったと思っています。
おまけ：基本的なブランチ運用フロー
① 現在地確認
git status
② 最新情報取得
git pull
③ ブランチ作成・移動
git switch -c feature/作業名
④ 作業する
⑤ 変更をステージング
git add ファイル名
⑥ コミット
git commit -m "作業内容"
⑦ mainに切り替え
git switch main
⑧ マージ
git merge feature/作業名
⑨ リモートへ反映
git push origin main
⑩ ローカルブランチ削除
git branch -d feature/作業名
⑪ リモートの不要な追跡情報を削除
git fetch --prune
