はじめに
こんにちは。エンジニアの仕事をしている、たかふみです。
本日は、Laravel-mixを使用した、ビルド方法についてまとめたいと思います。
なお、本記事は以下のLaravel-mixを使用しています。
"laravel-mix": "^6.0.29",
本記事ではnpmを使用して記述しておりますが、yarnやpnpmでも結果は同じだと思います。
ビルドの種類
Laravel-mixを使用したビルドはいくつか種類があります。
npm run dev
npm run dev は、時間はかかりますが、一番無難なビルドです。
コマンドを打ったあとにビルドが反映されます。
ビルド実行後に、画面をリロードするとビルドの反映が確認できます。
他のビルド方法では、ごくまれにビルドができていない場合がありますが
npm run devは確実にビルドができます。ただし、デメリットとしして、ビルド時間が長めです。私のローカル環境では数十秒かかります。
ビルドに慣れていない方は、npm run devの使用を推奨します。
npm run watch
npm run watchは、リアルタイム反映でビルドを行います。
npm run devと違い、コードを修正したら即座に反映されます。私のローカル開発環境では、数百ミリ秒レベルで反映されて早いです。
ビルド成功後に、画面をリロードするとビルドの反映が確認できます。
ただし、しばしばコード修正が反映されてないことも多いです。
このビルドは確実性に欠けるので反映させないほうがいいです。
※ビルド中はコマンドを閉じないでください。
npm run watch-poll
npm run watchと同じくリアルタイム反映、数百ミリ秒でビルドを行います。
npm run watchと違い、理由は不明だけどビルドされてない！という事態はめったにありません。
ただし、全ファイルを監視してるようなので、若干重たいです。
PCのメモリを十分積んでるのであれば、重くなることはないと思います。
PCの負荷を軽くしたい場合は、--watch-options-poll=1000の数字をよしなに設定してください。
デフォルト設定では1000ミリ秒に一回、watchしているようです。
"watch-poll": "mix watch -- --watch-options-poll=1000",
確実にビルドできて反映速度も高いので、私は普段このビルドを使用しています。
npm hot
このビルドは、画面をリロードしなくても、ビルドの反映確認をすることができます。
ただし、DockerやLaravel-mixの設定ファイルを変更する必要があります。
以下のサイトなどを参考にしてください
npm prod
これは本番用設定のビルドです。
ビルド方法そのものに関しては、npm run devと変わらず、コマンド実行後にビルドが発生し、ソースに反映されます。
ビルド方法まとめ
ビルド方法に関して表にまとめたいと思います。
| ビルド反映タイミング | 速度 | 確実性 | |
|---|---|---|---|
| npm run dev | コマンド実行後 | ☓ | ◎ |
| npm run watch | ファイル修正直後 | ◎ | △ |
| npm run watch-poll | ファイル修正直後 | ◎ | ◎ |
| npm run hot | ファイル修正直後 | ◎ | ◎ |
| npm run prod | コマンド実行後 | ☓ | ◎ |
ビルドにエラーが出る場合の対応方法
ビルド後にエラーが発生する場合がありますので、その対象方法を述べます。
npmのキャッシュを消してみよう
下記コマンドでキャッシュクリアしてみてください。
npm cache verify
このコマンドは、キャッシュファイルのガベージコレクションをしてくれて、キャッシュファイルの整理をしてくれるそうです。このコマンドを打つとビルドのエラーが出なくなることが多いです。
ビルドが反映されない場合
ビルドが反映されない場合があるのでその対処法を記述します。
ctrl+F5を押そう
jsやcssのファイルアが、ブラウザのキャッシュされていることが多いです。
ctrl+f5を押すと、ブラウザのキャッシュクリアしてリロードしますので試してみてください。
もしかしてステージング環境を見てないか？？
間違えて、ステージング環境を見てませんか？URLは、ローカル開発環境のURLでしょうか？
私は、ビルドかけて反映されてない！なんで？と思ったけど、ステージング環境のページを見てたので修正が反映されませんでした。なんてことがあります。単純ですがお気をつけてください。
さいごに
今日はLaravel-mixを使用したビルドについてまとめました。
Laravel-mixを使用しているみなさんの参考にしてして頂けると幸いです。それでは！
