Laravel Mix とは、「Laravel」というPHPフレームワークに付属するアセットパイプラインツールです。Sass の変換や JavaScript ファイルの結合、BrowserSync によるブラウザの自動再読込などを簡単な設定ファイルで実行することができます。
今回はこれを Laravel を使わずに単体で使用する方法をご紹介します。
Mix のインストール
Laravel Mix（以下 Mix）のインストールには、Node.js と NPM が必要です。以下のコマンドを実行してバージョンが表示されない場合は、Node.js のダウンロードページからインストーラーを取得し、インストールしてください。
$ node -v
$ npm -v上記のコマンドが動くようになったら、Mix をインストールする前に、package.json を作っておきます。Mix をインストールしたいフォルダに移動してから、以下のコマンドを実行します。
$ npm init -y-y オプションを付けることで、デフォルトの package.json が生成されます。
次に、Mix をインストールします。Mix は不足するパッケージを追加でインストールするようにできていますが、後述の Laravel が用意しているコマンドを利用する場合は、cross-env というパッケージを手動でインストールする必要があります。同時にインストールしましょう。
$ npm i -D laravel-mix cross-env新たに package-lock.json と node_modules フォルダが生成されます。Git 等のバージョン管理ソフトを使用している場合は、後者は無視されるように設定しておきましょう。
Mix を簡単に動かすために、Laravel からコマンドをコピーします。Laravel のリポジトリにある package.json を開き、scripts の中身を先程生成した package.json にコピーします。
{
"name": "hogehoge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cross-env": "^5.2.0",
"laravel-mix": "^4.1.2"
}
}Mix 設定ファイルの作成
Mix のインストールが済んだので、Mix の設定を行なう webpack.mix.js というファイルを作成しましょう。テキストエディタ等で新規ファイルを作成し、package.json と同じ階層に保存します。
const mix = require('laravel-mix');
mix
.sass('resources/sass/app.scss', 'public/css')
.scripts([
'resources/js/hoge.js',
'resources/js/piyo.js',
], 'public/js/app.js');ここでは例として、Sass のコンパイルと JS の結合を行ないます。メソッドの使い方については、Laravel のドキュメントにまとまっているので、そちらを参照してください。
設定ファイルを書いたら、webpack.mix.js と同じ階層に resources フォルダを作り、それぞれ設定ファイルと同じパスになるようにアセットファイルを作ります。
html {
body {
background-color: honeydew;
}
}console.log('hoge');console.log('piyo');ここまでできたら、一度 Mix を動かしてみましょう。Sass をコンパイルするのに必要なパッケージが足りないため、自動でインストールされます。
$ npm run devもう一度 npm run dev すると、今度はコンパイルが実行され、public フォルダの中にコンパイルされたアセットが入っている筈です。
html body {
background-color: honeydew;
}console.log('hoge');
console.log('piyo');ES6 を使う場合
mix.scripts を mix.babel に変更すると、JS の結合をしつつ、ES6 を一般的なブラウザでも解釈できる ES5 に変換してくれます。
mix.babel([
'resources/js/es6.js',
], 'public/js/app.js');const pow = x => x * x;これでコンパイルすると、ES5 に変換されます。
var pow = function pow(x) {
return x * x;
};mix のオプション
Mix には、css の background-image に相対パスを指定すると、該当する画像を自動的に public フォルダにコピーする機能があります。
しかし、mix.copyDirectory 等を使って自分で画像を設置したい場合は不要な機能です。以下のように設定しましょう。
mix.options({
processCssUrls: false,
})ブラウザを自動で再読み込みする
Sass や JS ファイルを変更する度に、手動でブラウザの再読込を行なうのは面倒です。Mix では BrowserSync を使って、アセットがコンパイルされる度に自動でブラウザを再読込させることができます。
先程の設定ファイルに BrowserSync を使う設定を書き足します。
mix
.sass('resources/sass/app.scss', 'public/css')
.scripts([
'resources/js/hoge.js',
'resources/js/piyo.js',
], 'public/js/app.js')
.browserSync({
files: 'public/**/*',
server: 'public',
proxy: false,
});files には監視するファイル、server には Web サイトのルートとなるフォルダをそれぞれ指定します。proxy は明示的に false にする必要があります。
ここまで書けたら、以下のコマンドを実行します。ファイル変更を監視する場合は、dev ではなく watch を使います。
$ npm run watchbrowser-sync がない場合はインストールされます。その場合はもう一度 npm run watch を実行しましょう。新しくブラウザのタブが開きますが、おそらく「Cannot GET /」と表示されているでしょう。public フォルダに index.html を作ります。
<!DOCTYPE html>
<title>test</title>
<link rel="stylesheet" href="css/app.css">
<body>
<p>hello, world</p>
<script src="js/app.js"></script>
</body>BrowserSync を使う際の注意点として、body の開始・終了タグを省略してしまうと、自動更新が機能しません。html や head タグは省略しても良いですが、body タグだけは明記するようにしましょう。
これで、自動再読込の設定ができました。試しに resources/sass/app.scss の background-color を他の色に変更してみましょう。背景色がその色一色に変わる筈です。
PHP を使ったサイトの場合
BrowserSync のサーバーは飽くまで簡易的なもので、PHP 等を使った動的なサイトを表示することはできません。
PHP を使う場合は、MAMP 等のローカルサーバーを別途立ち上げて、そのアドレス（localhost:8888 等）を mix.browserSync に渡します。
mix.browserSync('localhost:8888');この機能の注意点ですが、BrowserSync が動くのは npm run watch したときに開くページ（localhost:3000 等）であって、Mix で設定した localhost:8888 ではありません。
簡易サーバーのときと同じアドレスですが、実際はローカルサーバーで処理されたページを表示しているので、PHP のページも表示することができるようになります。
おわりに
自分で Webpack の設定を作ってみたことがあるのですが、正直分かりづらいし、書いていて辛いです。Gulp の方が好きです。
Laravel Mix を使えば、カオスになりがちな Webpack の設定を簡潔に書くことができます。Webpack の設定ファイルに圧倒されているなら、是非使ってみてください。
参考サイト
- Laravel Mixでwebpackをもっと簡単に使う方法
https://www.webprofessional.jp/use-laravel-mix-non-laravel-projects/ - Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました
https://www.tam-tam.co.jp/tipsnote/html_css/post13444.html
