首页 php框架 Laravel laravel-mix怎么自动压缩html模板文件

laravel-mix怎么自动压缩html模板文件

Mar 05, 2021 pm 01:53 PM
laravel

下面由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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Laravel中实施推荐系统? 如何在Laravel中实施推荐系统? Aug 02, 2025 am 06:55 AM

创建referrals表记录推荐关系,包含推荐人、被推荐人、推荐码及使用时间;2.在User模型中定义belongsToMany和hasMany关系以管理推荐数据;3.用户注册时生成唯一推荐码(可通过模型事件实现);4.注册时通过查询参数捕获推荐码,验证后建立推荐关系并防止自荐;5.当被推荐用户完成指定行为(如下单)时触发奖励机制;6.生成可分享的推荐链接,可使用Laravel签名URL增强安全性;7.在仪表板展示推荐统计信息,如总推荐数和已转化数;必须确保数据库约束、会话或Cookie持久化、

如何在Laravel雄辩中使用访问者和突变器? 如何在Laravel雄辩中使用访问者和突变器? Aug 02, 2025 am 08:32 AM

conscortorSandMutatorsInlaravel'SeloquentormallowyOutoFormAtormanIpulateModeModeLattributesWhenRetRievorvingOrstTingValues.1.useaccessorstocustomizeattributeretributeretrieval,sueascaScapapitalizingfirst_namevirst_nameviagetFirstnameAtTeameAtTeameAtTeameAtTeameAtTeameAttribute($ value)($ value)

Laravel的存储库合同是什么? Laravel的存储库合同是什么? Aug 03, 2025 am 12:10 AM

Repository模式是一种设计模式,用于解耦业务逻辑与数据访问逻辑。1.它通过接口(Contract)定义数据访问方法;2.具体操作由Repository类实现;3.控制器通过依赖注入使用接口,不直接接触数据源;4.优势包括代码整洁、可测试性强、便于维护和团队协作;5.适用于中大型项目,小型项目可直接使用模型。

如何在Laravel雄辩中使用子征服? 如何在Laravel雄辩中使用子征服? Aug 05, 2025 am 07:53 AM

laravelleloquentsuportsubqueriesInSelect,从哪里,andorderbyClauses启用Feflexibledataretievalwithoutrawsql; 1.UseselectSub()toaddcompentedColumnSlumnsLikePostCountCountCountCountCountPeruser; 2.Usefromsub; 2.usefromsub; 2.Usefromsub orclosolusoblesoblesoboledInfom()

如何与Laravel创建一个宁静的API? 如何与Laravel创建一个宁静的API? Aug 02, 2025 pm 12:31 PM

创建Laravel项目并配置数据库环境;2.使用Artisan生成模型、迁移和控制器;3.在api.php中定义API资源路由;4.实现控制器中的增删改查方法并使用请求验证;5.安装LaravelSanctum实现API认证并保护路由;6.统一JSON响应格式并处理错误;7.使用Postman等工具测试API,最终得到一个功能完整、可扩展的RESTfulAPI。

Laravel MVC:建筑限制 Laravel MVC:建筑限制 Aug 03, 2025 am 12:50 AM

Laravel'simplementationofMVChaslimitations:1)Controllersoftenhandlemorethanjustdecidingwhichmodelandviewtouse,leadingto'fat'controllers.2)Eloquentmodelscantakeontoomanyresponsibilitiesbeyonddatarepresentation.3)Viewsaretightlycoupledwithcontrollers,m

了解MVC:Laravel如何实现模型视图控制器模式 了解MVC:Laravel如何实现模型视图控制器模式 Aug 02, 2025 am 01:04 AM

laravelimplementsthemvcpatternbyingmodelsmodelsfordatamanage,ControllerSforBusinessLogic,andViewSforPresentation.1)模型InnlaravelaravelAravelAravelAravelAravelAravelAravelAraveRormshandlingDataAndRealations.2)ControllersManagetheflowbetneflowbetefbetefbetnefbetnemodelsandviews.3)

如何通过Laravel收银员处理重复的付款? 如何通过Laravel收银员处理重复的付款? Aug 06, 2025 pm 01:38 PM

InstallLaravelCashierviaComposerandconfiguremigrationandBillabletrait.2.CreatesubscriptionplansinStripeDashboardandnoteplanIDs.3.CollectpaymentmethodusingStripeCheckoutandstoreitviasetupintent.4.SubscribeusertoaplanusingnewSubscription()anddefaultpay

See all articles