Php/laravel/laravel5/laravelmix/基本

laravel mixとは

laravel用のwebpackのAPIラッパーでlaravel Elixirの後継

laravel5.4以上のプロジェクトを用意

php/laravel/laravel5/インストール [ｼｮｰﾄｶｯﾄ]

composer create-project laravel/laravel=5.4.* laravelmix1 --prefer-dist

laravelmix1はプロジェクト名

laravel mixインストール準備

node,npmをインストール

javascript/nodejs/インストール/nvm [ｼｮｰﾄｶｯﾄ]

javascript/nodejs/npmインストール [ｼｮｰﾄｶｯﾄ]

node -v
npm -v

laravel mixインストール

npm install

laravel5.4には初期で入ってるはずだが、

$ npm list | grep laravel-mix
├─┬ laravel-mix@1.7.2

入っていなければインストール

$ npm install laravel-mix cross-env node-sass --save-dev

package.jsonが更新される

"devDependencies": {
+    "cross-env": "^5.1.3",
+    "laravel-mix": "^1.7.2",
+    "node-sass": "^4.7.2"
}

npmコマンド

npm run dev # minifyなしコンパイル
npm run watch # 変更ありファイルを監視してコンパイル
npm run watch-poll # 変更ありファイルを監視してコンパイル(dockerなど特定の環境)
npm run prod # minifyありコンパイル

コマンド詳細は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 --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"
 },

• npm run devを実行するとcssやjsなどがコンパイルされる（常駐状態にはならない)
• npm run watchは常駐状態になる

対象js,cssを増やす場合

プロジェクト直下の 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');

js,css使用方法

<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>

本番でjs,cssをブラウザキャッシュをさせない方法

以下両方記載

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');
if (process.env.NODE_ENV === 'production') {
  mix.version();
}

~.blade.php

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

以下ファイルにハッシュがついていることを確認 public/mix-manifest.json

   "/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",
   "/css/app.css": "/css/app.css?id=19214247ec8b1f7d17fd"

参考

Laravel mix事始め https://qiita.com/ryosukes/items/24a556b9e634c183f93b

Laravel Mixでwebpackをもっと簡単に使う方法 https://www.webprofessional.jp/use-laravel-mix-non-larav