laravel-mix가 html 템플릿 파일을 자동으로 압축하는 방법

다음 튜토리얼 칼럼인 laravel에서는 HTML 템플릿 파일을 자동으로 압축하는 laravel-mix를 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

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 파일을 열고 다음 콘텐츠를 추가하세요. 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);
  }
});

압축 매개변수는 html-minifier(https://github.com/)를 참조하세요. kangax/html-minifier ?spm=a2c6h.14275010.0.0.70f559611yXtvP)

파일 변경 사항 모니터링

프로젝트 루트 디렉터리에 compress.js 새 파일을 만들고 다음 내용을 작성하세요.

rrreee🎜🎜부팅 후 자동으로 듣기 명령 시작 🎜🎜🎜위 단계를 완료한 후 명령줄에서 node extract.js를 실행하면 압축 손실 템플릿 파일을 자동으로 모니터링할 수 있습니다. <style> 및 <script>의 내용이 압축되었습니다. storage/framework/views/에서 템플릿 파일을 열고 html이 한 줄로 압축되어 있는지 확인하세요. 템플릿에 php 코드가 포함되어 있으면 php가 압축되지 않습니다. 등의 줄바꿈을 제거하세요. 🎜일부 페이지의 js 코드가 압축되지 않으며 아직 이유가 발견되지 않았습니다. 🎜🎜리스닝 파일 명령은 명령 콘솔에 상주하므로 부팅 시 자동으로 시작되고 백그라운드에서 명령이 시작되도록 설정해야 합니다. 🎜rrreee🎜🎜Optimization🎜🎜🎜 laravel의 자체 package 명령 npm run prod에 --progress code>가 포함되어 있기 때문입니다. , 장기간 사용하면 압축 로그 <code>compress.out가 점점 커집니다. 🎜package.json에서 다음과 같이 새 compress 명령을 추가하고 --progress 매개변수를 제거합니다. 🎜rrreee🎜그런 다음 압축하세요. js 파일을 다음과 같이 수정해야 합니다. 🎜rrreee🎜🎜🎜권장: 🎜최신 5개 Laravel 비디오 튜토리얼🎜🎜🎜

위 내용은 laravel-mix가 html 템플릿 파일을 자동으로 압축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!