|
|
| 行1: |
行1: |
| − | ==laravel mixとは==
| + | [[php/laravel/laravel5/laravelmix/基本]] |
| − | 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 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"
| + | |
| − | },
| + | |
| − | | + | |
| − | ==対象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
| + | |
| − | if (process.env.NODE_ENV === 'production') {
| + | |
| − | mix.version();
| + | |
| − | }
| + | |
| − | ~.blade.php
| + | |
| − | <nowiki><link rel="stylesheet" href="{{ mix('/css/app.css') }}"></nowiki>
| + | |
| − | <nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki>
| + | |
| − | | + | |
| − | ==参考==
| + | |
| − | Laravel mix事始め
| + | |
| − | https://qiita.com/ryosukes/items/24a556b9e634c183f93b
| + | |
| − | | + | |
| − | Laravel Mixでwebpackをもっと簡単に使う方法
| + | |
| − | https://www.webprofessional.jp/use-laravel-mix-non-larav
| + | |
