|
|
(同じ利用者による、間の8版が非表示) |
行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"
| + | |
− | },
| + | |
− | | + | |
− | ==参考==
| + | |
− | https://www.webprofessional.jp/use-laravel-mix-non-larav
| + | |