Laravelのnpm run devとnpm run watchの違い

こんにちは！トビログ管理人のとびうおです。本日はLaravel 8(Laravel)のnpm run devと npm run watchの違いについて書いていこうと思います。そもそもnpm run 〇〇がどのような意味なのか分からない方でもわかるような解説になっています！

npm run dev

npm run dev

こちらは対象のファイルを全てコンパイルします。

というのも簡単にいうと、resourcesの中のcssとかをpublicに移しているというイメージでいいと思います。

もしresourcesの中のcssのファイルを増やしたら、webpack.mix.jsの中を書き換えてあげましょう。resourcesの中にcssを追加したのに反映されていない！という時はこれが原因のことが多いです……

例えばstyle.cssをresources/cssの中に追加した場合は、

を追加して

npm run dev

をしてみると、

このようだったのが

public/cssの中にstyle.cssが増えていることがわかると思います。

npm run watchは?

npm run watch

こちらは対象のファイルをコンパイルしてその後変更などあれば随時、コンパイルしてくれます。

具体的にどういうことかというと、

npm run watchをした状態でresources/cssの中のstyle.cssを書き換えて保存します。するとpublicの中のstyle.cssにも変更が加わります。

また、watchをするとターミナルが

こういう感じになってartisanコマンドなどが打てなくなります。

そういう時はShift(Win) or Control(Mac) と Cを押すことによって抜け出す&npm run watchを停止(=resources/cssの中のstyle.cssを書き換えても変更がpublicの中のstyle.cssに加わることがなくなる)することができます。

最後に

僕はLaravel UIをインストールした時にnpm run install && npm run devをしろ！と言われていたのでよく分からずコマンドを打っていたのですが意味を知ると意外に難しくないことに気づきました。

今後もLaravelの記事やプログラミングの記事を書いていこうと思うのでよろしくお願いします！

Laravel 8においてログイン機能を実装する。(Laravel UI)

こんにちは！トビログ管理人のとびうおです。今回はLaravel 8にてLaravel UIを使用してログイン機能を実装する方法を解説します。ログイン機能を作るのにLaravel UIを使用する理由としては初心者にわかりやすいこと、...

tobilog.net

2021.08.10