laravel-mix 自動壓縮html模板文件
之前講過從零開始部署一個 Laravel 項目
這次講一下怎么自動壓縮php模板文件
安裝依賴
cd /var/www/html/laravel-project npm i -D laravel-mix@^5.x laravel-mix-template-minifier watch shelljs
壓縮處理
打開文件webpack.mix.js,并添加以下內容：
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,
});壓縮的參數，見html-minifier（https://github.com/kangax/html-minifier?spm=a2c6h.14275010.0.0.70f559611yXtvP）
監聽文件變化
在項目根目錄新建文件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 prod");
setTimeout(() => {
precessing = false;
}, 5000);
}
});開機自啟監聽命令
以上步驟完成后，在命令行執行node compress.js,即可實現自動監聽壓損模板文件，可以打開網頁看到頁面內的<style>以及<script>中的內容已經壓縮了。打開storage/framework/views/中的模板文件，發現html已被壓縮成一行，如果模板中有包含php代碼，則不會去除php中的換行等。
有些頁面的js代碼不會壓縮，暫時沒找到什么原因。
由于監聽文件命令是常駐命令臺的，所以我們要設置開機自啟，并且后臺啟動該命令。
nano /etc/rc.d/rc.local # 添加以下內容 cd /var/www/html/ysmj-laravel nohup node compress.js > /var/www/html/laravel-project/compress.out 2>&1 & # 保存文件。然后設置權限使其開機自啟 chmod +x /etc/rc.d/rc.local
優化
由于laravel自帶的package命令npm run prod中帶有--progress,長期使用，會導致壓縮日志compress.out日益過大。
在package.json中，新添加compress命令，去除--progress參數，如下：
"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);
}
});
