facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎本番でjs,cssをブラウザキャッシュをさせない方法)
(→‎本番でjs,cssをブラウザキャッシュをさせない方法)
 
(同じ利用者による、間の2版が非表示)
行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

「http://wiki.nonip.net/index.php?title=Php/laravel/laravel5/laravelmix/基本&oldid=6160」から取得