こんにちは!トビログ管理人のとびうおです。本日は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って何をしてるの?](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/08/スクリーンショット-2021-08-08-22.26.22.png?resize=1024%2C246&ssl=1)
を追加して
npm run dev
をしてみると、
![npm run devをする前](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/08/スクリーンショット-2021-08-08-22.28.31.png?resize=818%2C552&ssl=1)
このようだったのが
![npm run devをした後](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/08/スクリーンショット-2021-08-08-22.29.23.png?resize=792%2C608&ssl=1)
public/cssの中にstyle.cssが増えていることがわかると思います。
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
npm run watchは?
npm run watch
こちらは対象のファイルをコンパイルしてその後変更などあれば随時、コンパイルしてくれます。
具体的にどういうことかというと、
npm run watchをした状態でresources/cssの中のstyle.cssを書き換えて保存します。するとpublicの中のstyle.cssにも変更が加わります。
また、watchをするとターミナルが
![npm run watchは?](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/08/スクリーンショット-2021-08-08-22.36.05.png?resize=1024%2C136&ssl=1)
こういう感じになってartisanコマンドなどが打てなくなります。
そういう時はShift(Win) or Control(Mac) と Cを押すことによって抜け出す&npm run watchを停止(=resources/cssの中のstyle.cssを書き換えても変更がpublicの中のstyle.cssに加わることがなくなる)することができます。
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www16.a8.net/0.gif?resize=1%2C1&ssl=1)
最後に
僕はLaravel UIをインストールした時にnpm run install && npm run devをしろ!と言われていたのでよく分からずコマンドを打っていたのですが意味を知ると意外に難しくないことに気づきました。
今後もLaravelの記事やプログラミングの記事を書いていこうと思うのでよろしくお願いします!
![](https://i0.wp.com/image.moshimo.com/af-img/4817/000000068539.png?resize=300%2C300)
![](https://i0.wp.com/www16.a8.net/0.gif?resize=1%2C1&ssl=1)
コメント