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

Wie Laravel-Mix HTML-Vorlagendateien automatisch komprimiert

藏色散人
Freigeben: 2021-03-08 09:04:24
nach vorne
2749 Leute haben es durchsucht

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
Nach dem Login kopieren

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,
});
Nach dem Login kopieren
压缩的参数,见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);
  }
});
Nach dem Login kopieren

开机自启监听命令

以上步骤完成后,在命令行执行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
Nach dem Login kopieren

优化

由于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"
  },
Nach dem Login kopieren

然后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);
  }
});
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage