Search code examples
htmlvalidationgulpminifyw3c-validation

HTML-Minifier removes the spaces between element's attributes

I have implemented html-minifier over my html code to minify the html for production environment. Here I have observed that when my code gets minified along with the spaces between by attributes also gets removed. Below is my raw HTML snippet and the minified snippet:

Raw HTML Snippet

<!DOCTYPE html>
<html lang="en">
<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">

Minified HTML Snippet

<!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>

Above is one of the snippets of many html files I am minifying using html-minifier, to do this minification I am using the gulp package "gulp-htmlmin": "^4.0.0" And below are features I have marked in .pipe to get executed for html minification:

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/'));
});

How can I resolve the issue of removal of spaces between attributes?

My expected output is get the minified html without the removal spaces from the mid of element's attributes.

Why I want this? I want this because html validator by w3 is throwing me error as shown in screen shot, and this all about missing space between attributes:

enter image description here

Solution

  • The removeTagWhitespace option seems to be causing this, see this issue on GitHub: https://github.com/kangax/html-minifier/issues/570

    Setting it to false should prevent this from happening (it could leave more whitespace than desired then, depending on what input HTML you feed into it; but that’s still better than invalidating your whole document).