LaravelでLaravel Mixをインストールして利用する方法

PHPフレームワークのLaravelでは、CSSやJavaScriptのプリプロセッサやBrowserSyncなどの機能を簡単に扱えるnpmパッケージのLaravel Mixを利用できます。

今回は、そのLaravel MixをLaravelでインストールして利用する方法となります。

なお、Laravel MixはLaravel以外のプロジェクトでもインストールして利用することもできます。

LaravelでLaravel Mixをインストールする方法

以下の方法では、Laravelをすでにインストールしている前提としています。Laravelのインストール方法については、以下のリンク先を参考にしてみてください。

Laravelをインストールし新規プロジェクトを作成する方法｜Composer・PHP

Laravel Mixは、npmのパッケージとなるため、まずはNode.jsをインストールしておく必要があります。

Node.jsをMacでインストールする方法については、以下のリンク先を参考にしてみてください。

【nodebrewコマンドまとめ】Homebrewでのインストール｜Node.jsのバージョン管理

Laravelをインストールすると、Laravelのルートディレクトリにnpmのパッケージを管理するpackage.jsonが配置されます。

そのpackage.jsonを元に、以下のコマンドでnpmのパッケージをインストールすることで、Laravel Mix をインストールできます。

cdコマンドでpackage.jsonのあるディレクトリに移動し、以下のコマンドを実行します。

npm install

前述のpackage.jsonファイルには、Laravel Mixを扱えるnpm-scriptsが準備されています。インストールしたLaravel Mixを利用するには、そのnpm-scriptsのコマンドを実行します。

以下、npm-scriptsのコマンドの一部となります。

以下のnpm-scriptsのコマンドを実行すると、関連するファイルを監視して、ファイルが更新されたら自動でコンパイルを行います。

npm run watch

また、上記のコマンドでは、ファイル更新時にコンパイルされないことがあります。その場合には、以下のコマンドを実行します。

npm run watch-poll

以下のnpm-scriptsのコマンドを実行すると、関連するファイルのビルドを実行し、出力されるファイルを圧縮します。

npm run production

Laravel Mixをインストールすると、Laravelのルートディレクトリにwebpack.mix.jsファイルが配置されるので、そのファイルでLaravel Mixでコンパイル・ビルドを行う際の設定が可能です。

以下は、webpack.mix.jsの基本的な設定例となり、JavaScript・Sassをコンパイルします。

const mix = require('laravel-mix');

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

webpack.mix.jsでは、上記のようにrequireで読み込んだモジュールに対して、メソッドチェーンを利用して設定を追加します。

.js()はJavaScript、.sass()はSassのコンパイル・結合などを行うメソッドとなります。それぞれ、第1引数にコンパイルを行うファイルを指定し、第2引数に出力するファイルを指定します。

webpack.mix.jsの詳細や、その他の設定などは、以下のリンク先や文末の参考サイトを確認してみてください。

【Laravel Mix】ブラウザを自動更新｜Browsersyncの設定方法

【Laravel Mix】ソースマップを出力する設定方法｜Sass・JavaScript