一、PostHtml 的工作流程:
- PostHtml 将 HTML 文档转化为一课节点树
- PostHtml 的插件在这棵树上做各种处理,以实现需求
- PostHtml 将节点树转化回 HTML 文档
二、常用插件
posthtml-pug
将 pug 转化成 html
posthtml-md
将 md 语法转化为 html 语法
posthtml-retext
根据规则转化自然语言(例如特定字符串转成 emoji 表情)
posthtml-head-elements
将 JSON 配置生成 head 元素内容
posthtml-include
引入 html 片段(实现 html 的模块化)
posthtml-modules
同上,而且她能实现 vue 中 slot 的效果
posthtml-inline-assets
将外部的 css、js、图片等资源内联进 html
posthtml-cache
在某标签的某属性值后增加随机查询参数,如
1
2
3
<script src="script.js"></script>
<!-- 处理后 -->
<script src="script.js?v=93ce_Ltuub"></script>
posthtml-spaceless
删除指定区域内标签之间的空格
posthtml-postcss
使用 postcss 处理 html 内的样式(style 标签和内联样式)
posthtml-px2rem
在 html 内使用 px2rem 处理 style 标签和内联样式
posthtml-inline-css
可将外部样式或 style 标签内样式弄成内联样式
posthtml-collect-inline-styles
可将内联样式提取到 style 标签内
posthtml-style-to-file
可将内联样式和 style 标签内样式提取到独立文件内
posthtml-color-shorthand-hex-to-six-digit
将缩写的 hex color 转化成 6 个字符的格式
posthtml-minifier
压缩
htmlnano
同上
posthtml-remove-attributes
根据属性名或值去除指定属性
posthtml-remove-tags
去除指定名称的标签
Posthtml-remove-duplicates
根据标签名删除内容完全一样的标签
posthtml-transfomer
1.将标记的引用外部文件的 script 或 link 标签的内容,内联进 html 2.将标记的标签删除 3.将标记的多个引用外部文件的 script 或 link 标签的内容,内联进 html 内的同一标签内
posthtml-tidy
整理 html、清理无用的标签