Php/laravel/laravel5/laravelmix

laravel mixとは

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

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

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

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

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 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"
 },

参考

https://www.webprofessional.jp/use-laravel-mix-non-larav