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.