Heim  >  Artikel  >  PHP-Framework  >  Wie Laravel-Mix HTML-Vorlagendateien automatisch komprimiert

Wie Laravel-Mix HTML-Vorlagendateien automatisch komprimiert

藏色散人
藏色散人nach vorne
2021-03-05 13:53:162657Durchsuche

In der folgenden Tutorial-Kolumne von laravel wird Laravel-Mix zum automatischen Komprimieren von HTML-Vorlagendateien vorgestellt. Ich hoffe, es wird Freunden in Not hilfreich sein!

laravel-mix komprimiert automatisch HTML-Vorlagendateien

Ich habe bereits über die Bereitstellung eines Laravel-Projekts von Grund auf gesprochen
Dieses Mal werde ich darüber sprechen, wie man PHP-Vorlagendateien automatisch komprimiert


Installationsabhängigkeiten

cd /var/www/html/laravel-project

npm i -D laravel-mix@^5.x laravel-mix-template-minifier watch shelljs

Komprimierungsverarbeitung

Öffnen Sie die Datei webpack.mix.js und fügen Sie den folgenden Inhalt hinzu: 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);
  }
});
Komprimierungsparameter finden Sie unter html-minifier (https://github.com/ kangax/html-minifier ?spm=a2c6h.14275010.0.0.70f559611yXtvP)

Überwachen Sie Dateiänderungen

Erstellen Sie eine neue Datei compress.js im Projektstammverzeichnis und schreiben Sie den folgenden Inhalt:
rrreee🎜🎜Starten Sie den Abhörbefehl automatisch nach dem Booten. 🎜🎜🎜Führen Sie nach Abschluss der obigen Schritte node compress.js in der Befehlszeile aus, um die Komprimierungsverlust-Vorlagendatei automatisch zu überwachen. Sie können die Webseite öffnen und sehen Sie sich den <style> und <script> wurde komprimiert. Öffnen Sie die Vorlagendatei in storage/framework/views/ und stellen Sie fest, dass der HTML-Code in eine Zeile komprimiert wurde. Wenn die Vorlage php-Code enthält, ist dies bei php nicht der Fall Zeilenumbrüche in usw. entfernt werden. 🎜Der js-Code einiger Seiten wird nicht komprimiert und es wurde noch kein Grund dafür gefunden. 🎜🎜Da sich der Befehl „Listening File“ in der Befehlskonsole befindet, müssen wir ihn so einstellen, dass er beim Booten automatisch gestartet wird, und den Befehl im Hintergrund starten. 🎜rrreee🎜🎜Optimierung🎜🎜🎜Weil laravels eigener package-Befehl npm run prod --progress enthält Bei langfristiger Verwendung wird das Komprimierungsprotokoll compress.out immer größer. 🎜Fügen Sie in package.json einen neuen Befehl compress hinzu und entfernen Sie den Parameter --progress wie folgt: 🎜rrreee🎜Dann komprimieren. Die js-Datei muss wie folgt geändert werden: 🎜rrreee🎜🎜🎜Empfohlen: 🎜Die neuesten fünf Laravel-Video-Tutorials🎜🎜🎜

Das obige ist der detaillierte Inhalt vonWie Laravel-Mix HTML-Vorlagendateien automatisch komprimiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen