はじめに

Laravel にデフォルトで入っている Laravel Mix ですが、特に Webpack を導入する場合などにはとても便利だなと思っています。

実はこの Laravel Mix は、名前に Laravel が入っているものの、CakePHP にも導入が可能になっています。

今日は CakePHP 4 で Laravel Mix 5 を使用するための方法をご紹介します。

目次

1. 下準備
2. Laravel Mix インストール
3. webpack.mix.js の設定
4. ビルド用のコマンドを追加
5. おわりに

1. 下準備

1-1. package.json 作成

適当に package.json を作ってください。動作確認用でしたら下記でも大丈夫です。

{
}

1-2. JS と SCSS

今回使用した Javascript と SCSS です。
どちらも resources に入れていますが、任意のフォルダで差支えありません。

alert('Hello, World!');

$blue: #2C6B9B;
html {
    body {
        color: $blue;
    }
}

2. Laravel Mix インストール

npm コマンドを使って Laravel Mix をインストールします。
そして、併せて使用する cross-env も入れちゃいます。

$ cd /path/to/cakephp4
$ npm i -D laravel-mix cross-env

余談ですが npm コマンドの i -D は、それぞれ install --save-dev と同じです。
ただし -d と小文字にしちゃうと別コマンドになってしまうのでお気をつけください。

3. webpack.mix.js の設定

今回は webpack.mix.js を下記のようにしました。

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

Mix.manifest.refresh = () => {};
mix.setPublicPath('webroot');

// resources/js/app.js は /webroot/js/app.js に、
// resources/scss/app.scss は /webroot/js/app.css に出力
mix.js('resources/js/app.js', 'js')
    .sass('resources/scss/app.scss', 'css');

Mix.manifest.refresh の箇所は mix-manifest.js を作らないようにするためのものです。

Laravel Mix 5 で mix-manifest.js を作らない方法 / Twin Turbo Computing

https://tt-computing.com/laramix5-disable-manifest

setPublicPath() ではコンパイルしたファイルの出力先を、CakePHP のファイル構成に合わせて /webroot にしています。

4. ビルド用のコマンドを追加

package.json に Laravel Mix 用のコマンドを追加します。
下記公式ドキュメントを参考に scripts を登録してください。

NPM Scripts (Installation | Laravel Mix Documentation)

https://laravel-mix.com/docs/5.0/installation#npm-scripts

僕は（個人的なプロジェクトの場合は）下記のようにしています。

"scripts": {
  "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "npm run dev -- --watch"
},

これで下記のようにコマンドを叩いて Javascript や SCSS のビルドができるようになります。

# 開発用
$ npm run dev

# 本番環境用（ミニファイ）
$ npm run prod

# 監視（ファイル変更時に自動ビルド）
$ npm run watch

実行時に下記のようなメッセージが表示されて、ビルドが行われなかった場合は、同じコマンドをもう一度実行してください。

$ npm run prod
...
Okay, done. The following packages have been installed and saved to your package.json dependencies list:

- sass-loader@8.*

- sass

- resolve-url-loader@3.1.0

Finished. Please run Mix again.

$ npm run prod ← もう一度同じコマンドを実行

5. おわりに

Laravel Mix はインストールや設定の手間が少なく、すぐに使うことができるので、作業の効率化が期待できます。

今回は CakePHP で使う方法としてご紹介しましたが、他フレームワークなどでも同様の手順で導入できますので、役立ちそうな場合には、ご検討いただければと思います。