实际项目中建议至少启用 removecomments、collapsewhitespace、removeemptyattributes、removescripttypeattributes、removestylelinktypeattributes 这 5 项，慎用 minifyjs/minifycss 并注意与 fileinclude、rev 等插件的执行顺序。
htmlmin 配置项选哪些才不踩坑
默认只开 collapseWhitespace: true 很容易漏掉关键压缩点，比如保留了大量注释、空属性或冗余 type 属性，最终体积只减 5%～10%。实际项目中建议至少启用这 5 项：
-
removeComments: true—— 生产环境 HTML 注释毫无价值，且可能暴露开发路径或敏感信息 -
collapseWhitespace: true—— 注意：它会把换行和多空格全压成单空格，如果页面依赖white-space: pre或内联<pre class="brush:php;toolbar:false;"></pre>，得加preserveLineBreaks: true保换行 -
removeEmptyAttributes: true—— 清掉id=""、class=""这类无意义空值，但会连带删掉某些框架需要的空属性（如 Vue 的v-bind:attr=""），需确认模板引擎是否兼容 -
removeScriptTypeAttributes: true和removeStyleLinkTypeAttributes: true—— HTML5 中type="text/javascript"和type="text/css"已是默认值，删掉更干净
慎用 minifyJS 和 minifyCSS：它们调用的是 html-minifier 内置的简易压缩器，不支持 ES6+ 语法或现代 CSS 特性，容易报错或破坏代码逻辑；建议单独用 gulp-terser 和 gulp-clean-css 处理 JS/CSS。
gulp.src 路径写错导致文件没被压缩
常见错误是写成 gulp.src('src/*.html') 却忘了子目录，比如 src/pages/home.html 就不会被匹配到。正确做法是：
- 用 glob 通配符覆盖所有层级：
gulp.src('src/**/*.html') - 排除不需要处理的文件（如模板片段）：
gulp.src(['src/**/*.html', '!src/includes/**/*.html']) - 确保路径相对于
gulpfile.js所在位置 —— 如果 gulpfile 在项目根目录，src就是子目录；若在子目录下，路径要相应调整
运行前加个 .pipe(gulp.dest('debug')) 临时输出，能快速验证 src 是否真读到了目标文件。
压缩后页面白屏或样式错乱
这不是插件 bug，而是 html-minifier 对某些 HTML 结构过于激进。典型诱因有：
-
collapseBooleanAttributes: true把<input required="required">缩成<input required>—— 大部分浏览器没问题，但老版本 IE 可能不识别 -
removeOptionalTags: true（未在常见配置里出现，但有人手动加）会删掉、等可选标签，导致文档结构异常 - 模板语法冲突：如果用了
这类 EJS 语法，removeComments: true可能误删<!-- <%= data %> -->里的表达式
解决方法：先关掉所有“高级压缩”选项，只留 collapseWhitespace 和 removeComments，再逐个开启并本地验证渲染效果。
与 fileinclude、rev 等插件串联时顺序不能乱
htmlmin 必须放在 fileinclude 之后、revCollector 之前。顺序错了会出两类问题：
- 先 minify 再 include：压缩后的 HTML 里
@@include('./header.html')还在，没被替换，最终输出的是带模板语法的无效 HTML - 先 minify 再 rev：压缩后 script/src 和 link/href 的路径没被替换，导致线上资源 404
标准链路应为：gulp.src → fileinclude → htmlmin → revCollector → gulp.dest。如果用了 gulp-if 控制仅构建时压缩，记得把 htmlmin 放在条件分支内，别让它干扰开发流程。
真正麻烦的不是配置本身，而是 HTML 压缩天然和模板语法、运行时框架、CDN 版本替换耦合太深——改一个选项，就得全站回归测试一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
