Laravel Mixを使おう!
laravel mix とは
一言で言うと、
- web packの設定を簡単に書くことができるlaravel向けのnpmパッケージ
なのですが。これ言われても意味わかんなかったので噛み砕きます。分かる人は飛ばして。
web packはwebコンテンツを構成するJavaScriptやSassなどのリソースを モジュール と言う単位で取り扱い、
複数のモジュールを1つにまとめたファイルを出力・最適な形に作り変えてくれるツールです。
(例:3つのJavaScriptをまとめて1ファイルの呼び出しで良いようにしてくれる)
ざっくり言うと リソースの依存関係を解消してくれるコンパイラ です。
導入方法
導入にはグローバルインストールとローカルインストールがある。
グローバルインストールは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での呼び出しを追加
<!-- これで上記2つのjsが読み込まれる --> <head> <script type="text/javascript" src="{{ mix('js/common.js') }}"></script> </head>
実行
npm run dev
こんな感じの結果で、 DONE
が表示されていたら成功!
npm run watch
終わらせるときは ctr + C
でOK.