HTML-Minifier removes the spaces between element's attributes
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.)
Clientside HTML Minification
I managed to achieve what I wanted and even created a jQuery plugin to it.
jQuery.fn.clearWhiteSpace = function () {
var htmlClone = this.html().replace(/\n[ ]*/g,"");
this.html(htmlClone);
return this;
}
$(".parentDiv").clearWhiteSpace();
there is an example I wrote in jsfiddle
But thanks for all your effort. :)
How to Minify HTML code?
You could parse the HTML code into a DOM tree (which should keep content whitespace in the nodes), then serialise it back into HTML, without any prettifying spaces.
How to connect html-minifier to gulp?
If using plugin "vinyl-source-stream".
The solution to this question would be the following code.
In this code, I used plugins that work with streams.
But this code only converts one file!
You can read more details about each plugin on npmjs.
html-minifier, vinyl-fs, vinyl-source-stream, map-stream
const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');
const vfs = require('vinyl-fs');
const source = require('vinyl-source-stream');
const map = require('map-stream');
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true,
collapseWhitespace: true
};
function sol() {
let minify = function(file, cb) {
cb(null, htmlMinify.minify(file.contents.toString(), options));
};
return vfs
.src(['app/index.html'])
.pipe(map(minify))
.pipe(source('index.html'))
.pipe(vfs.dest('build'));
}
exports.sol = series(sol);
This was the answer to this particular question.
There is a more elegant solution to this problem.
No third party plugins required. I described it in this post.
Related Topics
Keep the Middle Item Centered When Side Items Have Different Widths
How to Style Even and Odd Elements
Using Sections in Editor/Display Templates
Center a Div Horizontally and Vertically
Nesting Block Level Elements Inside the ≪P≫ Tag... Right or Wrong
Absolutely Positioned Flex Item Is Not Removed from the Normal Flow in Ie11
How to Create Your Own HTML Tag in Html5
How to Make a Whole Row in a Table Clickable as a Link
Html Encoding Issues - "Â" Character Showing Up Instead of "&Nbsp;"
How to Use Jsf+Facelets With HTML 4/5
Putting ≪Div≫ Inside ≪P≫ Is Adding an Extra ≪P≫
What Is Href="#" and Why Is It Used
Set the Table Column Width Constant Regardless of the Amount of Text in Its Cells
How to Create a Checkbox With a Clickable Label