Laravel Mixを使おう！ - あじちゃんの備忘録。

laravel mix とは

一言で言うと、

web packの設定を簡単に書くことができるlaravel向けのnpmパッケージ

なのですが。これ言われても意味わかんなかったので噛み砕きます。分かる人は飛ばして。

web packはwebコンテンツを構成するJavaScriptやSassなどのリソースを モジュール と言う単位で取り扱い、
複数のモジュールを1つにまとめたファイルを出力・最適な形に作り変えてくれるツールです。
（例：３つのJavaScriptをまとめて１ファイルの呼び出しで良いようにしてくれる）
ざっくり言うと リソースの依存関係を解消してくれるコンパイラ です。

導入方法

導入にはグローバルインストールとローカルインストールがある。
グローバルインストールはwebpackを利用したいディレクトリ（プロジェクト）以外の 全ての環境に影響を及ぼす ので各自よしなにお願いします。

グローバルインストールの場合

cd ~/
npm install webpack -g

ローカルインストールの場合

cd [目的のプロジェクトルート]
npm install --save-dev webpack

（必要ならば）足りないパッケージを補うため以下のコマンドを実行

npm init -y

使用方法

準備

node/npmをインストール（yarnでもOK）
Laravel 5.* のプロジェクトを作成
npm installを実行
プロジェクトルートに「webpack.mix.js」があるのでコンパイルの対象を追加（JSファイルやSassファイルなど）

// mix.js('ビルド元のソースコード', 'ビルド済みファイル出力場所')
// 例
mix.js('resources/assets/js/common.js', 'public/js')
    .js('resources/assets/js/sub.js', 'public/js')

viewでの呼び出しを追加

<!-- これで上記２つのjsが読み込まれる -->
<head>
   <script type="text/javascript" src="{{ mix('js/common.js') }}"></script>
</head>

実行

npm run dev

f:id:azix:20180515182735p:plain こんな感じの結果で、 DONE が表示されていたら成功！

jsやcssを即時でコンパイルしたい場合（書きながらすぐ反映させたい時）

npm run watch

終わらせるときは ctr + C でOK.