Comment laravel-mix compresse automatiquement les fichiers de modèle HTML

La colonne tutorielle suivante de laravel présentera laravel-mix pour compresser automatiquement les fichiers de modèles html. J'espère que cela sera utile aux amis dans le besoin !

laravel-mix compresse automatiquement les fichiers de modèle HTML

J'ai déjà parlé du déploiement d'un projet Laravel à partir de zéro
Cette fois, parlons de la façon de compresser automatiquement les fichiers de modèle php

---

Installation des dépendances

cd /var/www/html/laravel-project

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

Traitement de compression

Ouvrez le fichier webpack.mix.js et ajoutez le contenu suivant :

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

Pour les paramètres de compression, voir html-minifier (https://github.com/kangax/html-minifier?spm=a2c6h.14275010.0.0.70 f559611yXtvP)

Surveiller les modifications du fichier

Créer un nouveau fichier compress.js dans le répertoire racine du projet et écrire le contenu suivant :

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

Commande d'écoute de démarrage automatique au démarrage

Après avoir terminé les étapes ci-dessus, exécutez node compress.js sur la ligne de commande pour surveiller automatiquement le fichier du modèle de perte de pression. Vous pouvez ouvrir la page Web pour voir le contenu. de <style> et <script> dans la page Déjà compressé. Ouvrez le fichier modèle dans storage/framework/views/ et constatez que le code HTML a été compressé en une seule ligne. Si le modèle contient du code php, les sauts de ligne dans php ne seront pas supprimés.
Le code js de certaines pages ne sera pas compressé, et aucune raison n'a encore été trouvée.

Étant donné que la commande du fichier de surveillance réside dans la console de commande, nous devons la configurer pour qu'elle démarre automatiquement au démarrage et démarre la commande en arrière-plan.

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

Optimisation

Étant donné que la propre commande laravel de package npm run prod contient --progress, une utilisation à long terme entraînera des journaux compresséscompress.outDe plus en plus trop grand.
Dans package.json, ajoutez une nouvelle commande compress et supprimez le paramètre --progress, comme suit :

"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"
  },

Ensuite, le fichier compress.js doit être modifié, comme suit :

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

Recommandé : Les cinq derniers didacticiels vidéo Laravel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!