概要

・Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール
・ツールの中身はwebpackを利用している
・webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている
・lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる
・Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる

※webpackが分からない方はこちらを参照
webpackとは？

使い方

初期状態

※npmが分からない方は、先にこちらを参照
npmとは？【フロントエンドパッケージ管理】

Laravelをインストールすると、
package.jsonとwebpack.mix.jsが用意されている。

package.jsonには
Laravel Mix自体やその他必要なパッケージが記述済み。
また、package.jsonのscriptsにはwebpackを実行するためのスクリプトも記述されている。

webpack.mix.jsは、
webpack設定ファイル（webpack.config.js）のラッパー。
ここにコンパイル対象ファイルやバンドル対象ファイルなど
設定を記述していく。

※LaravelではないアプリでLaravel Mixを使う場合でも、
package.jsonとwebpack.mix.jsの2ファイルを用意するだけであとは同じです。
Laravel Mix公式サイトのStand-Alone Projectを参考に。

Laravel Mixインストール

npm install コマンドを実行すると、
package.jsonに記述されているLaravel Mix自体がインストールされる。
（npmが使える環境である前提）

設定ファイルの記述

webpack.mix.jsに、設定を記述する。

sassファイルをコンパイルしたい場合

mix.sass('resources/assets/sass/app.scss', 'public/css');

cssファイルをバンドルしたい場合

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

jsをコンパイルしたい場合

mix.js('resources/assets/js/app.js', 'public/js');

jsファイルをバンドルしたい場合

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

他にもいろいろ設定できることはある。

Laravel Mixの実行

npm run dev を実行すると、
package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイルやバンドルが実行される。

npm run production の場合は圧縮されたファイルが出力される。

もう少し具体的な機能

知っておいたほうがいい主な機能を抜粋。

jsのコンパイル

上記の通り、
jsファイルをコンパイルするには

mix.js('resources/assets/js/app.js', 'public/js');

と書く。

この処理では
・ES2015記法
・モジュール
・.vueファイルのコンパイル
・開発環境向けに圧縮
のコンパイルが実行される。

babel実行

jsファイルをバンドルする設定として、
mix.scripts()を紹介したが、
この代わりにmix.babel()を使うことができる。

これをすると、
バンドルされたファイルはES5記法に変換された状態になる。

IEはES5までしか対応していないため、
もしIEでも動作させる必要があるシステムの場合は
このmix.babel()機能を使ってES5記法に変換するほうがいい。

ESのバージョンやbabelというツールについては
この記事を参照。
ES（ECMAScript）とは？jsがブラウザによって動いたり動かなかったりするのはなぜ？
polyfill、babelとは？jsをどのブラウザでも動くようにしてくれる。（IE対応）

キャッシュバスティング

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

このように記述すると、
ファイル名の末尾に一意のハッシュ値が付与される。

これによって、
コンパイルのたびにファイル名が変更されるため
CSSやJSなどがブラウザキャッシュに残って変更が反映されないことを防止できる。

このファイルを読み込むbladeファイル側では、
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
のようにmix()関数を使うことで、
ハッシュ値のついたファイル名でも取得することができる。

Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。

概要

使い方