Php/laravel/laravel5/laravelmix/基本 - 版の履歴

Admin: /* 本番でjs,cssをブラウザキャッシュをさせない方法 */

2018-05-16T02:39:28Z

本番でjs,cssをブラウザキャッシュをさせない方法

← 古い版		2018年5月16日 (水) 02:39時点における版
77行目:		77行目:
	<nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki>		<nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki>

	~~以下ファイルにハッシュがついていることを確認~~		public/mix-manifest.json にハッシュがついていることを確認

	public/mix-manifest.json
	"/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",		"/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",
	"/css/app.css": "/css/app.css?id=19214247ec8b1f7d17fd"		"/css/app.css": "/css/app.css?id=19214247ec8b1f7d17fd"

Admin: /* 本番でjs,cssをブラウザキャッシュをさせない方法 */

2018-05-16T02:39:16Z

本番でjs,cssをブラウザキャッシュをさせない方法

← 古い版		2018年5月16日 (水) 02:39時点における版
78行目:		78行目:

	以下ファイルにハッシュがついていることを確認		以下ファイルにハッシュがついていることを確認

	public/mix-manifest.json		public/mix-manifest.json
	"/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",		"/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",

Admin: /* 本番でjs,cssをブラウザキャッシュをさせない方法 */

2018-05-16T02:39:06Z

本番でjs,cssをブラウザキャッシュをさせない方法

← 古い版		2018年5月16日 (水) 02:39時点における版
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"

	==参考==		==参考==

Admin: /* 本番でjs,cssをブラウザキャッシュをさせない方法 */

2018-05-16T02:38:38Z

本番でjs,cssをブラウザキャッシュをさせない方法

← 古い版		2018年5月16日 (水) 02:38時点における版
65行目:		65行目:

	==本番でjs,cssをブラウザキャッシュをさせない方法==		==本番でjs,cssをブラウザキャッシュをさせない方法==
			以下両方記載

	webpack.mix.js		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') {		if (process.env.NODE_ENV === 'production') {
	mix.version();		mix.version();

Admin: /* laravel5.4以上のプロジェクトを用意 */

2018-05-10T03:44:55Z

laravel5.4以上のプロジェクトを用意

← 古い版		2018年5月10日 (木) 03:44時点における版
5行目:		5行目:
	[[php/laravel/laravel5/インストール]] [ｼｮｰﾄｶｯﾄ]		[[php/laravel/laravel5/インストール]] [ｼｮｰﾄｶｯﾄ]
	composer create-project laravel/laravel=5.4.* laravelmix1 --prefer-dist		composer create-project laravel/laravel=5.4.* laravelmix1 --prefer-dist
			laravelmix1はプロジェクト名

	==laravel mixインストール準備==		==laravel mixインストール準備==

2018年5月10日 (木) 03:44にAdminによる

2018-05-10T03:44:33Z

← 古い版		2018年5月10日 (木) 03:44時点における版
4行目:		4行目:
	==laravel5.4以上のプロジェクトを用意==		==laravel5.4以上のプロジェクトを用意==
	[[php/laravel/laravel5/インストール]] [ｼｮｰﾄｶｯﾄ]		[[php/laravel/laravel5/インストール]] [ｼｮｰﾄｶｯﾄ]
	composer create-project laravel/laravel=5.4.* ~~laravelmix~~ --prefer-dist		composer create-project laravel/laravel=5.4.* laravelmix1 --prefer-dist

	==laravel mixインストール準備==		==laravel mixインストール準備==

Admin: /* npmコマンド */

2018-04-23T09:13:15Z

npmコマンド

← 古い版		2018年4月23日 (月) 09:13時点における版
49行目:		49行目:
	"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"		"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を増やす場合==		==対象js,cssを増やす場合==

Admin: /* js,css使用方法 */

2018-04-11T06:43:03Z

js,css使用方法

← 古い版		2018年4月11日 (水) 06:43時点における版
57行目:		57行目:

	==js,css使用方法==		==js,css使用方法==
	<link rel="stylesheet" href="/css/app.css">		<link rel="stylesheet" href="/css/app.css">
	<script src="/js/app.js"></script>		<script src="/js/app.js"></script>

	==本番でjs,cssをブラウザキャッシュをさせない方法==		==本番でjs,cssをブラウザキャッシュをさせない方法==

Admin: /* laravel mixインストール */

2018-01-22T06:35:48Z

laravel mixインストール

← 古い版		2018年1月22日 (月) 06:35時点における版
18行目:		18行目:
	==laravel mixインストール==		==laravel mixインストール==
	npm install		npm install

	laravel5.4には初期で入ってるはずだが、		laravel5.4には初期で入ってるはずだが、
	$ npm list \| grep laravel-mix		$ npm list \| grep laravel-mix

Admin: ページの作成:「==laravel mixとは== laravel用のwebpackのAPIラッパーでlaravel Elixirの後継 ==laravel5.4以上のプロジェクトを用意== php/laravel/laravel5/イン...」

2018-01-18T03:25:11Z

ページの作成:「==laravel mixとは== laravel用のwebpackのAPIラッパーでlaravel Elixirの後継 ==laravel5.4以上のプロジェクトを用意== php/laravel/laravel5/イン...」

新規ページ

==laravel mixとは==
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