Laravel mix事始め

Laravel mix is 何

---

webpackのラッパー🙌

---

前の名前はLaravel Elixier

---

jsやsassなどのアセットを簡単にいい感じにコンパイルしてくれるビルドツール

---

webpack、Vue.js、sass等がすぐ使える🦆

---

インストール・使い方🌏

---

• Laravel 5.4以上をcomposer create-projectでインストールすると一緒に入ってくる
• コンフィグは node_modules/laravel-mix/setup/webpack.config.js に書いてある
• 他のビルドツールみたいにコマンドを打てば特定ファイルをコンパイルしてくれる

---

たくさん起動コマンドある…

package.json

"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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch-poll": "npm run watch -- --watch-poll",
  "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js -host=0.0.0.0 --https --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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
}

---

dev | development

• 対象ファイルを全てコンパイルしてくれる
• minifyされない

$ npm run {dev|development}

---

watch | watch-poll

• 対象ファイルを監視し変更があれば変更のあったファイルをコンパイル
• docker上で実行する場合は watch-poll でポーリングしないと変更が反映されない

$ npm run watch # on mac
$ npm run watch-poll # on docker

---

hot

• HMR(Hot Module Replacement)を実行できる
• サーバが立ち上がりそのサーバのメモリ上に保存された内容がサーブされる。コンパイル済みのファイルは生成されない

$ npm run hot

---

prod | production

• 対象ファイルを全てコンパイル
• minifyされる

$ npm run {prod|production}

---

対象ファイルを増やしたいとか変更したいとか

webpack.mix.js に書きましょう。ファイル形式によってヘルパーメソッド違うので詳細はドキュメント確認のこと

webpack.mix.js

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

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

---

ES2015とか使えんの？

jsメソッドで下記がデフォルトで使える

• ES2015 syntax.
• Modules
• Compilation of .vue files.
• Minification for production environments.

---

autoprefixerとかしてくれんの？

してくれる

app.scss

$brand-primary: #3097D1;
.test {
    color: $brand-primary;
    font-size: 20px;
    user-select: none;
}

app.css

.test {
  color: #3097D1;
  font-size: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

---

ブラウザキャッシュの対策できんの？

できる。 .version() と mix() 使えばOK

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

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

---

こうすれば本番だけ有効にもできる

mix.js('resources/assets/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

---

デプロイするときコンパイル済みのファイルS3にあげたいんだけど？

僕の手元ではまだできませんすみません😢

---

あとは

• .envでMIX_というプレフィックスつけた変数用意すれば環境変数使える
• js、css共に複数ファイルを結合できる
• cssで url() メソッドを使うとディレクトリ内の相対パスで画像ファイルの指定ができpublic配下に出力も可能

詳しくはドキュメント見て欲しいです🏄

---

便利そうですね😀