如何解决html-minifier移除属性间空格致W3C校验报错问题

我看到你在用gulp-htmlmin@4.0.0压缩生产环境HTML时，遇到了属性间空格被移除导致W3C校验报错的问题，这其实是你配置里的特定选项造成的，咱们一步步来解决：

问题根源 #

你的配置中开启了removeTagWhitespace: true，这个选项的作用是移除HTML标签内部属性之间的空格，比如把合法的<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible">压缩成<meta content="IE=edge, chrome=1"http-equiv=X-UA-Compatible>——这直接违反了HTML规范，因为属性之间必须用空格分隔，所以W3C校验器会报错。

另外你配置里重复写了collapseWhitespace和removeComments，这些重复项可以清理掉，不影响功能但会让配置更冗余。

解决方案 #

1. 关闭removeTagWhitespace选项 #

把removeTagWhitespace: true改成removeTagWhitespace: false，或者直接删除这个配置项（因为它的默认值就是false），这样压缩时就会保留属性之间的必要空格。

2. （可选但推荐）保留属性引号 #

你的配置里还开启了removeAttributeQuotes: true，虽然这个选项能减少文件体积，但如果属性值包含空格或特殊字符，省略引号可能会导致浏览器解析异常，也容易触发W3C校验警告。建议把这个选项也设为false，确保压缩后的HTML完全符合规范。

修改后的完整gulp任务配置 #

gulp.task('copy-welcome-page', function () {
 gulp.src(['./index.html', './privacy-policy.html', './pagenotfound.html', './google8dd2827589fa9627.html', './terms-conditions.html'], { "base": "." })
 .pipe(htmlmin({
 collapseWhitespace: true,
 removeComments: true,
 collapseBooleanAttributes: true,
 decodeEntities: true,
 minifyCSS: true,
 minifyJS: true,
 processConditionalComments: true,
 removeAttributeQuotes: false, // 修改为false，保留属性引号
 removeEmptyAttributes: true,
 removeOptionalTags: true,
 removeRedundantAttributes: true,
 removeScriptTypeAttributes: true,
 removeStyleLinkTypeAttributes: true,
 removeTagWhitespace: false, // 关闭属性间空格移除
 sortAttributes: true,
 sortClassName: true,
 trimCustomFragments: true,
 useShortDoctype: true
 }))
 .pipe(gzip({ gzipOptions: { level: 9 }, append: false }))
 .pipe(gulp.dest('build/'));
});

验证效果 #

修改配置后重新运行gulp任务，压缩后的HTML会保留属性之间的空格，比如：

<!DOCTYPE html> <html lang="en"> <title>ABS Website</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="robots" content="index, follow" /> ...

这样再提交给W3C校验器就不会再出现属性间空格缺失的报错了。

内容的提问来源于stack exchange，提问作者OM The Eternity