Question

我已经在我的html代码上实现了html-minifier来缩小生产环境的html。在这里，我观察到当我的代码被缩小以及属性之间的空间也被删除。以下是我的原始HTML代码段和缩小的代码段：

原始HTML代码段

<head>
    <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" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="description" content="Somedescriptions"
    />
    <!-- Bootstrap links -->
    <link rel="stylesheet" href="common/styles/bootstrap/bootstrap.min.css">

缩小的HTML代码段

<!DOCTYPE html><html lang=en><title>ABS Website</title><meta charset=utf-8><meta content="IE=edge, chrome=1"http-equiv=X-UA-Compatible><meta content="index, follow"name=robots><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"name=viewport><meta content="somedescription"name=description><link href=common/styles/bootstrap/bootstrap.min.css rel=stylesheet>

上面是我使用html-minifier缩小的许多html文件的片段之一，为了做这个缩小我使用gulp包“gulp-htmlmin”：“^ 4.0.0” 以下是我在.pipe中标记的功能，以便为html缩小执行：

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,
            collapseWhitespace: true,
            decodeEntities: true,
            minifyCSS: true,
            minifyJS: true,
            processConditionalComments: true,
            removeAttributeQuotes: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeOptionalTags: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            removeTagWhitespace: true,
            sortAttributes: true,
            sortClassName: true,
            trimCustomFragments: true,
            useShortDoctype: true
        }))
        .pipe(gzip({ gzipOptions: { level: 9 }, append: false }))
        .pipe(gulp.dest('build/'));
});

请帮助我解决删除属性之间空格的问题

我的预期输出是获取缩小的html，而没有从元素属性中间删除空格。

为什么我要这个？ 我想要这个，因为w3的html验证器正在向我发送错误，如屏幕截图所示，这一切都是关于属性之间缺少的空间

Answer 1

removeTagWhitespace选项似乎导致此问题，请在github上查看此问题：https://github.com/kangax/html-minifier/issues/570

将其设置为false可以防止这种情况发生。（它可能会留下比预期更多的空白，具体取决于您输入的HTML输入;但这仍然比使整个文档无效更好。）

HTML-Minifier删除元素属性之间的空格

1 个答案: