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

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

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

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

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

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

Node.js・npmをインストール

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

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

Laravel内のpackage.jsonからLaravel Mixをインストール

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

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

package.jsonからパッケージをインストール

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

npm install

Laravel Mixを利用する方法

前述の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の設定|webpack.mix.js

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の詳細や、その他の設定などは、以下のリンク先や文末の参考サイトを確認してみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。