首頁  >  文章  >  php框架  >  laravel-mix怎麼自動壓縮html模板文件

laravel-mix怎麼自動壓縮html模板文件

藏色散人
藏色散人轉載
2021-03-05 13:53:162725瀏覽

下面由laravel教學欄位來介紹laravel-mix 自動壓縮html模板文件,希望對需要的朋友有幫助!

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);
  }
});

推薦:最新的五個Laravel影片教學

#

以上是laravel-mix怎麼自動壓縮html模板文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除