「Php/laravel/laravel5/laravelmix/基本」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→本番でjs,cssをブラウザキャッシュをさせない方法) |
(→本番でjs,cssをブラウザキャッシュをさせない方法) |
||
行76: | 行76: | ||
<nowiki><link rel="stylesheet" href="{{ mix('/css/app.css') }}"></nowiki> | <nowiki><link rel="stylesheet" href="{{ mix('/css/app.css') }}"></nowiki> | ||
<nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki> | <nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki> | ||
+ | |||
+ | 以下ファイルにハッシュがついていることを確認 | ||
+ | public/mix-manifest.json | ||
+ | "/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2", | ||
+ | "/css/app.css": "/css/app.css?id=19214247ec8b1f7d17fd" | ||
==参考== | ==参考== |
2018年5月16日 (水) 11:39時点における版
目次
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