LaravelのCSS、JavaScript等ビルドツール「Laravel MIX」を使ってみる

npm scriptsを使用したプロジェクトをLaravelに移行しました。
Laravelの構成に合わせて、npm scriptsの設定を見直して、そのまま使い続けていたのですが、「Laravel MIX」がより便利？のようなお話を耳にしたので、早速環境を構築してみました。

Laravel MIXはwebpackをベースとしたフロントエンドアセットのビルドツールです。
GitHub – JeffreyWay/laravel-mix: The power of webpack, distilled for the rest of us.

実は、デフォルトのLaravelプロジェクトには、既にLaravel MIXを使う用意があり、それがルートにあるファイル「package.json」と「webpack.mix.js」です。
これらのファイルを使用して、Laravel MIXを利用します。

環境として、Laravel 6.xで運用中のプロジェクトで検証します。また、Windows 10でNode.jsがインストール済みを前提とします。

Laravel MIXのインストール

package.jsonを使用して、Laravel MIXをインストールします。
package.jsonには、Laravel MIX本体や、それに必要なパッケージの情報、そしてwebpackのスクリプトが記述されいます。
コマンドプロンプトで、対象のディレクトリへ移動し、以下のコマンドを実行します。

> npm install

package.jsonの情報を読み込んで、同ディレクトリのフォルダ「node_modules」にモジュールがインストールされるはずです。
インストールは以上です。

Laravel MIXの設定

webpack.mix.jsにはwebpackをラッピングした設定を記述します。
デフォルトの内容は以下の通りです。

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

jsは「resources/js/app.js」をES2015記法に書き換えたり、圧縮したりしてファイル「public/js/app.js」に出力します。
sassは「resources/sass/app.scss」をコンパイルして、ファイル「public/css/app.css」に出力します。

ここに自身で実際にビルドしたいCSSやJavaScriptのパスなどを設定します。
以下にいくつか便利に使えそうな設定のサンプルをあげてみました。

ファイル出力先の変更

Laravel本体をドキュメントルートから外すために、公開ディレクトリを変更してる方も多いはず。
以下のようにファイル出力先のルートを設定することができます。

mix.setPublicPath('../public_html/');

Laravel MIXの実行

Laravel MIXは以下のコマンドで実行します。

> npm run dev

また、ファイル更新を監視する場合は、以下のコマンドを実行します。

> npm run watch

さらに、本番公開用に圧縮したファイルを出力する場合は、以下のコマンドを実行します。

> npm run production