网站首页 > 资源文章 正文
作者:李俊辰 前端之巅
转发链接:
https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ
前言
近日,Pug 3.0.0 正式发布,Pug 原名 Jade,是由 TJHolowaychuk 开发的一款模板引擎,也是 Haml 的 JavaScript 实现版本。Pug 3.0.0 增加了一些新功能,除此之外新版本将不再支持 Node.js 6 和 Node.js 8。
重大变化
- 如果想使用支持 renderBuffer 的过滤器,read 插件必须返回到 Buffer。如果开发者不希望使用这一功能,则可以像从前一样返回 string。
- 使用 minify 过滤器上的选项需要安装相应的 jstransformer,目前支持的有:
- jstransformer-uglify-js:用于 JavaScript
- jstransformer-clean-css:用于 CSS
- 不再支持 Node.js 6 和 Node.js 8。
新功能
- Pug 3.0.0 中加入了新的 each...of... 循环。该语法可以使开发者遍历 Maps、Sets 和 Arrays,比之前的 each...in... 语法更高效,此版本依旧支持 each...in... 语法。
- 支持编写对二进制数据(例如图像)进行操作的过滤器,可以导入图像,应用过滤器并输出优化的标签,这一操作可以缩短页面加载时间,并使 Web 应用程序更加易于部署。
例如:
// options.js
exports.filters = {
png: {
// instead of a function, specify an object with a "renderBuffer" property
// whose value is a function that takes a Buffer instead of a string
renderBuffer: function(buffer, options) {
var data = Buffer.from(buffer).toString('base64');
return '';
}
}
};
然后就可以使用该过滤器了:
// foo.pug
include:png my-small-image.png
- 支持使用 generateCode 生成替换代码。
Rolling 版本
作者表示,自从他将 Pug 的单独的软件包合并到“mono repo”中以来,发行的难度增加了,后经一位 ThreadsStyling 的同事介绍了解到了语义释放,进而广泛地使用它,不过仍有一些限制:
- 语义释放不适用于 mono 仓库;
- 语义发布需要精确格式化的提交消息;
- 语义发布每次提交仅允许一项功能 / 错误修复 / 重大修改。
作者一直认为解决此问题的方法是将更改日志附加到拉取请求,而不是提交请求。所以在过去的 6 个月中,他一直在探索这个问题的解决方案。此次的 Rolling 版本提供了一个简单的用户界面,可以将更改日志附加到请求中的特定软件包。然后,它会提供一个 CLI 来发布软件包,开发者可以在持续集成服务上运行该软件包。
Pug 采用简化语法的方式,将原本臃肿的 HTML 标记精简化,同时还有很多优点:超强的可读性、灵活易用的缩进、块扩展、代码默认经过代码处理以增加安全性、拥有编译和运行时的上下文错误报告、命令行编译支持、HTML5 模式、可选的内存缓存、联合动态的静态标记类、利用过滤器解析树的处理...
因为这些优点,Pug 收获了很多开发者的好评。开发者表示,Pug 和 Vue 简直是天作之合,大幅度提高了编码效率,不过 Pug 似乎不太适合与 React 一起使用,因为关闭标签会浪费太多行代码。
推荐JavaScript经典实例学习资料文章
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代,未来将何去何从?》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范:命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript,Regex)》
《127个常用的JS代码片段,每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者:李俊辰 前端之巅
转发链接:
https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ
猜你喜欢
- 2025-03-25 PUBG绝地求生5月17日更新 PUBG23.3版本最新消息确定
- 2025-03-25 为什么说大多数人去非洲后都不愿意回来?网友:国内生存太卷了
- 2025-03-25 全新起航!eUnited签下Ze Pug Godz
- 2025-03-25 Spug - 轻量级自动化运维平台(自动化运维平台 开源)
- 2025-03-25 拉伯雷:文艺复兴时期的幽默巨匠与思想先锋
- 2025-03-25 巴哥犬(PUG)(巴哥犬为什么容易死)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 电脑显示器花屏 (79)
- 403 forbidden (65)
- linux怎么查看系统版本 (54)
- 补码运算 (63)
- 缓存服务器 (61)
- 定时重启 (59)
- plsql developer (73)
- 对话框打开时命令无法执行 (61)
- excel数据透视表 (72)
- oracle认证 (56)
- 网页不能复制 (84)
- photoshop外挂滤镜 (58)
- 网页无法复制粘贴 (55)
- vmware workstation 7 1 3 (78)
- jdk 64位下载 (65)
- phpstudy 2013 (66)
- 卡通形象生成 (55)
- psd模板免费下载 (67)
- shift (58)
- localhost打不开 (58)
- 检测代理服务器设置 (55)
- frequency (66)
- indesign教程 (55)
- 运行命令大全 (61)
- ping exe (64)
本文暂时没有评论,来添加一个吧(●'◡'●)