laravel-mix如何自動(dòng)壓縮html模板文件

這篇文章給大家分享的是有關(guān)laravel-mix如何自動(dòng)壓縮html模板文件的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

安裝依賴

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)頁(yè)看到頁(yè)面內(nèi)的<style>以及<script>中的內(nèi)容已經(jīng)壓縮了。打開storage/framework/views/中的模板文件，發(fā)現(xiàn)html已被壓縮成一行，如果模板中有包含php代碼，則不會(huì)去除php中的換行等。
有些頁(yè)面的js代碼不會(huì)壓縮，暫時(shí)沒(méi)找到什么原因。

由于監(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,長(zhǎng)期使用，會(huì)導(dǎo)致壓縮日志compress.out日益過(guò)大。
在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);
  }
});

感謝各位的閱讀！關(guān)于“l(fā)aravel-mix如何自動(dòng)壓縮html模板文件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！