【Laravel】npm run devとproductionの違いと意味!実行後の変化とは

【Laravel】npm run devとproductionの違いと意味!実行後の変化とは

この記事からわかること

  • Laravelビルドとは?
  • npmコマンドのdevproduction違い
  • コンパイル意味
  • ビルド後のファイル構造メリット/デメリット

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Laravelでアプリ開発をしていたところビルドするためのnpmコマンドの違いがよくわからなかったのでまとめました。

本番用のビルドはそもそもいつすれば良いの?」「実行しても元に戻せる?」など初心者が悩みがちなことを調べて見ました。

そもそもnpmとは?

Laravelでよく使うnpm(Node package manager)はNode.jsをインストールした時に同時にインストールされているパッケージ管理ツールです。Node.jsはサーバーサイド側で動くJavaScriptでコマンドラインから命令を実行することで動作させます。

$ node -v
v16.13.0
$ npm -v
8.1.0

Node.jsがインストールされていればnpm -vでインストールされているバージョンを確認できます。

npmのメリットはまさしくパッケージ(ライブラリ)の依存性などを意識せずとも自動で組み込んでくれたり、削除してくれるところです。

Laravelに新しくライブラリを組み込む時はinstallコマンドを使うことで依存性を意識せず導入することができます。

$ npm install vue-route

npm run コマンドとは

Laravelでビルド(プロジェクトを正しく動くように組み替えること)する時に使うnpm run XXXコマンドは実はnpm独自のものというよりLaravel独自のコマンドです。

npmでは自分でコマンドを定義、実行することができる「npm srcipts」と呼ばれる機能を携えています。

定義する場所はpackage.jsonscriptsの中です。Laravelプロジェクトの中のpackage.jsonのscriptsの中を見てみると以下のようにdevproductionなどが定義されています。

"scripts": {
  "build": "webpack",
  "dev": "npm run development",
  "development": "mix",
  "watch": "mix watch",
  "watch-poll": "mix watch -- --watch-options-poll=1000",
  "hot": "mix watch --hot",
  "prod": "npm run production",
  "production": "mix --production"
},

ビルドとコンパイルの意味

ビルドが具体的に何をしているのか。それはファイルのコンパイルと圧縮です。

コンパイルとは

コンパイルとは元のソースコードをより機械が理解しやすい形に成形することを指します。例えばSass(cssを簡単に書ける言語)で書いたファイルがあるとします。しかし書かれているのはブラウザが理解できるcssの文法ではなく、Sass独特の文法なのでこのままではブラウザが理解してくれません。このファイルをコンパイルすることで独特の文法をcssの見慣れた文法(ブラウザが理解できる文法)に変換してくれるのです。

Sass

.text{
  font-size: 20px;
a
    color:#DD8147;
    padding:10px 20px;
}

コンパイル後のcss

.text{
  font-size: 20px;
}

.text a{
    color:#DD8147;
    padding:10px 20px;
}

コンパイルは元のファイルを上書きするのではなく、読み込んで変換した内容を新しいファイルとして作成してくれるイメージで良いと思います。なのでビルドしてもコンパイル前のファイルがなくなってしまうなんてことはないので安心してください。

圧縮とは

圧縮とはjs/cssの「ファイルの圧縮」のことです。例えばcssファイルを作成する時可読性が高いようにインデント(字下げ)したり改行を含ませたりすると思います。しかしその分ファイルの容量が重くなってしまうのがデメリットでもあります。

圧縮することによってインデントや改行などコードに不必要な記述を除去することで容量を抑えています。これにより読み込み時間が少なくなり結果的にWebページの表示速度が早くすることができます。

.text{
  font-size: 20px;
}

.text a{
    color:#DD8147;
    padding:10px 20px;
}

圧縮後のcssファイル

.text{font-size: 20px;}.text a{color:#DD8147;padding:10px 20px;}

npm run devとproductionの違いと意味

ビルドの意味が分かった上で、Laravel内でいくつか用意されているビルドするコマンドを見ていきます。

npm run dev

開発用(開発:developer)のビルドコマンドです。コマンドを実行するたびに現在のプロジェクトをビルド(コンパイル)してくれます。

メリット

デメリット

npm run prod

本番用(生産:production)のビルドコマンドです。コマンドを実行するたびに現在のプロジェクトをビルド(コンパイル+圧縮)してくれます。

メリット

デメリット

npm run watch

開発用のビルドコマンドです。違いとしてはdevがコマンドを実行するたびにビルドされるのに対し、watch一度実行すると停止(ctrl+C)を押すまでファイルの更新があるたびに自動でビルドし続けます。

メリット

デメリット

npm run watch-poll

watch-poll1秒ごとにファイルの変更を確認してくれるコマンドです。

watchではビルドが不安定なことが多いです。更新を常に監視しづけているので動作も重く、更新したのに表示が変わらないこともあります。watchコマンドが動かない時は-pollをつけると改善されるかもしれません。

秒数部分はpackage.json内にoptions-poll=1000"と言ったミリ秒単位で定義されているので適宜変更すれば監視タイミングを調節できます。

"scripts": {
  "watch-poll": "mix watch -- --watch-options-poll=1000",
},

ビルド前と後のファイル構造

ビルドコマンドをする前と後ではLaravelプロジェクト内のファイル構造に変化があります。関係するのはプロジェクト直下の「public」と「resource」です。

├── Laravelプロジェクト
│    ├── public
│             ├── css
│             └── js
│
│    ├── resource
│             ├── css
│             ├── js
│             └── view
│
│    ├── package.json

ビルドを実行すると「resource」にあるcssファイルやjsファイルがコンパイル(圧縮)され「public」の中に配置されます。

例えば「resource」内に「test.css」を作成してみます。HTMLのhead内では以下のようにpublicにある体で読み込むようにしておきます

<link rel="stylesheet" href="{{ asset('css/style.css') }}">
Laravelのresource内に作成したcssファイル

ではこの状態でビルドしてみます。

$ npm run prod

もちろん「public」の中に「test.css」は作成していませんが、ビルド後のファイル構造をデベロッパーツールから確認してみると以下のように「test.css」が配置されています。

ビルド後のファイル構造

ビルドしたのに表示が変わらない対処法

ビルドコマンドを実行しても表示が変わらない時はキャッシュを削除してみると良いかもしれません。

$ npm cache verify

私がLaravel学習に使用した参考書

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index