「Laravel Mix」Stand-Aloneを使ってみる

「Laravel Mix」といえば、Laravelに付属しているタスクランナーです。

昨今、タスクランナーといえばnpm-scriptやgulpをよく聞きますが、どうもしっくりこないんですよね。
そこで、今回はLaravel本体は使用せずにタスクランナー機能のみを利用できる「Larave Mix Stand-Alone」を試してみます。
Laravel Mix
実はLaravel Mixの中身はwebpackで、それをより便利に使いやすく設計されたツールだそうです。そうだったんですね。

以下、Windows 10で、Node.jsがインストール済みであることが前提です。

Laravel Mixをインストール

Laravel Mixをインストールします。プロジェクトフォルダに移動して、以下のコマンドを実行します。

> npm init -y
> npm install laravel-mix --save-dev

インストールが完了したら、同一ディレクトリにファイル「webpack.mix.js」を新規作成し、以下のコードを記述します。

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

処理は空っぽの状態ですが、以下で実行します。

> npx mix

sassをコンパイルしてみる

それでは実際にsassをコンパイルしてみます。
sassのコンパイルには「sass-loader」が必要なので、事前にインストールします。

> npm install sass-loader --save-dev

例えば、sassファイル「scss/style.scss」をコンパイルし、フォルダ「css」に出力する場合、「webpack.mix.js」を以下のように編集します。

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

mix.sass('scss/style.scss', 'css');

以下のコマンドを実行します。するとsassがコンパイルされたファイル「css/style.css」が出力されます。

> npx mix

sassファイルの編集を監視するwatchモードは、以下のように実行します。

> npx mix watch

本番公開用に圧縮して出力する場合は、以下のようにします。

> npx mix --production

ソースの出力先を指定する

ビルド後のファイルの出力先を変更したい場合は「setPublicPath」で指定します。

mix.sass('scss/style.scss', 'css').setPublicPath('public_html');

この場合「public_html/css/style.css」で出力されます。

開発のみsourceMapを出力する

sourceMapを出力してChromeのデバッグを有効にする場合は、以下のように設定します。

if(!mix.inProduction()) {
	mix.sass('scss/style.scss', 'css')
		.webpackConfig({
			devtool: 'inline-source-map'
		})
		.sourceMaps();
}

この時「!mix.inProduction()」で分岐することで、開発時のみsourceMapを出力します。
本番公開（–production指定）時には出力されないため、余分なものをリリースせずにすみます。

ライセンス情報を出力しない

importしたライブラリなどのライセンス情報が、外部ファイル「LICENSE.txt」として出力されます。これを外部ファイルではなく、jsファイルそのものにコメントとして出力する場合に、オプション「extractComments: false」を指定します。

mix.options({
		terser: {
			extractComments: false
		}
	});

さらに、ライセンス情報そのものを出力しない場合は、以下のようにします。

mix.options({
		terser: {
			extractComments: false,
			terserOptions: {
				output: {
					comments: false,
				}
			}
		}
	});

「mix-manifest.json」を出力しない

「mix-manifest.json」が不要で出力したくない場合、以下のオプションを追加します。

mix.options({
		manifest: false
	});

BrowserSyncを使ってみる

ファイルの内容が変更されたら、自動的にブラウザをリロードする「BrowserSync」を使ってみます。
パッケージ「browser-sync」が必要なので、インストールします。

> npm install browser-sync browser-sync-webpack-plugin@^2.3.0 --save-dev

私の場合、Bootstrap5はインストール済みでしたが、それに必要なpopper.jsがインストールされてなかった？みたいなので、以下のエラーが発生しました。

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js 6:0-41
Module not found: Error: Can't resolve '@popperjs/core' in '...\node_modules\bootstrap\dist\js'      

webpack compiled with 1 error

そこでpopper.jsをインストールします。

> npm install @popperjs/core --save

例えばxampp、hostsなどで「helog.localhost」というようなドメインで開発環境を用意している場合、「webpack.mix.js」に以下のように設定します。

mix.sass('scss/style.scss', 'css')
	.browserSync('helog.localhost');

watchモードで起動すると、sassファイルを更新しcssファイルが出力される度にブラウザがリロードされるのが確認できます。

> npx mix watch

但し、このままだとcssファイルしか監視してくれません。wordpress開発など、phpファイルの更新も検知してリロードしてほしい場合は、以下のようにして監視するファイルを拡張することができます。

mix.sass('scss/style.scss', 'css')
	.browserSync({
		proxy: 'helog.localhost',
		files: [
			"wp-content/themes/**/*.css",
			"wp-content/themes/**/*.php"
		]
	});

watchが遅い

ファイル変更を検知するwatchモードが重いです。
ファイルを保存してから、コンパイル完了まで10秒ほどかかります。PCのCPU負荷も上がり、ファンが高回転します。
Laravel Mixは使えないと思えるレベルです。

原因の1つとして、大量のファイル、フォルダを監視下に置いてるケースがあります。
その場合は、監視の必要のないフォルダを対象外にしてしまえばよいです。
以下はフォルダ「node_modules」を対処外とする設定例です。

mix.webpackConfig({
	watchOptions: {
		ignored: /node_modules/
	}
})

複数フォルダ、ファイルや、ワイルドカードでの指定も可能です。詳細はwebpackのマニュアルを参考にできます。
Watch and WatchOptions | webpack

私の場合、この方法で70%ほど速度改善しました。