laravel-mix 自動(dòng)壓縮html模板文件
之前講過從零開始部署一個(gè) Laravel 項(xiàng)目
這次講一下怎么自動(dòng)壓縮php模板文件
安裝依賴
cd?/var/www/html/laravel-project
npm?i?-D?laravel-mix@^5.x?laravel-mix-template-minifier?watch?shelljs
壓縮處理
打開文件webpack.mix.js,并添加以下內(nèi)容：
mix.minTemplate?\=?require("laravel-mix-template-minifier");
mix.minTemplate("storage/framework/views/\*.php",?"storage/framework/views/",?{
collapseInlineTagWhitespace:?true,
collapseWhitespace:?true,
minifyCSS:?true,
minifyJS:?true,
processConditionalComments:?true,
removeAttributeQuotes:?false,
removeComments:?true,
removeTagWhitespace:?false,
trimCustomFragments:?false,
});
壓縮的參數(shù)，見html-minifier（https://github.com/kangax/html-minifier?spm=a2c6h.14275010.0.0.70f559611yXtvP）
監(jiān)聽文件變化
在項(xiàng)目根目錄新建文件compress.js,寫入以下內(nèi)容:
let?shell?=?require("shelljs");
let?watch?=?require("watch");
let?precessing?=?false;
watch.watchTree("./storage/framework/views",?function(f,?curr,?prev)?{
if?(!precessing)?{
precessing?=?true;
shell.exec("npm?run?prod");
setTimeout(()?=>?{
precessing?=?false;
},?5000);
}
});
開機(jī)自啟監(jiān)聽命令
以上步驟完成后，在命令行執(zhí)行node compress.js,即可實(shí)現(xiàn)自動(dòng)監(jiān)聽壓損模板文件，可以打開網(wǎng)頁看到頁面內(nèi)的<style>以及<script>中的內(nèi)容已經(jīng)壓縮了。打開storage/framework/views/中的模板文件，發(fā)現(xiàn)html已被壓縮成一行，如果模板中有包含php代碼，則不會(huì)去除php中的換行等。
有些頁面的js代碼不會(huì)壓縮，暫時(shí)沒找到什么原因。
由于監(jiān)聽文件命令是常駐命令臺(tái)的，所以我們要設(shè)置開機(jī)自啟，并且后臺(tái)啟動(dòng)該命令。
nano?/etc/rc.d/rc.local
#?添加以下內(nèi)容
cd?/var/www/html/ysmj-laravel
nohup?node?compress.js?>?/var/www/html/laravel-project/compress.out??2>&1?&
#?保存文件。然后設(shè)置權(quán)限使其開機(jī)自啟
chmod?+x?/etc/rc.d/rc.local
優(yōu)化
由于laravel自帶的package命令npm run prod中帶有--progress,長期使用，會(huì)導(dǎo)致壓縮日志compress.out日益過大。
在package.json中，新添加compress命令，去除--progress參數(shù)，如下：
"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",
"compress":?"cross-env?NODE_ENV=production?node_modules/webpack/bin/webpack.js?--hide-modules?--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"
},
然后compress.js文件需要修改，如下：
let?shell?=?require("shelljs");
let?watch?=?require("watch");
let?precessing?=?false;
watch.watchTree("./storage/framework/views",?function(f,?curr,?prev)?{
if?(!precessing)?{
precessing?=?true;
shell.exec("npm?run?compress");
setTimeout(()?=>?{
precessing?=?false;
},?5000);
}
});
本文來自PHP中文網(wǎng)laravel教程的欄目：https://www.php.cn/phpkj/laravel/
