facebook twitter hatena line email

「Php/laravel/laravel5/laravelmix」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(参考)
 
(同じ利用者による、間の6版が非表示)
行1: 行1:
==laravel mixとは==
+
[[php/laravel/laravel5/laravelmix/基本]]
laravel用のwebpackのAPIラッパーでlaravel Elixirの後継
+
  
==laravel5.4以上のプロジェクトを用意==
+
[[php/laravel/laravel5/laravelmix/vue]]
[[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"
+
  },
+
 
+
==対象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');
+
 
+
==参考==
+
Laravel mix事始め
+
https://qiita.com/ryosukes/items/24a556b9e634c183f93b
+
 
+
Laravel Mixでwebpackをもっと簡単に使う方法
+
https://www.webprofessional.jp/use-laravel-mix-non-larav
+

2018年1月18日 (木) 12:25時点における最新版

php/laravel/laravel5/laravelmix/基本

php/laravel/laravel5/laravelmix/vue