Install gulp-htmlmin with Npm through one command:
npm install gulp-htmlmin --save-dev
After the installation is completed, open the file and we write a task to specifically compress html and perform a series of processing on the html:
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
('html',function(){
var options = {
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
};
('app/**/*.html')
.pipe(htmlmin(options))
.pipe(('dest/'));
});
We see that there is a setting option in the task, which will introduce the role of their properties:
: From the literal meaning, it should be seen that clearing spaces and compressing html is more important, with a relatively large effect, and the amount of compression caused by changes is also particularly large;
: Omit the value of the Boolean attribute, such as: <input checked="checked"/>, then after setting this attribute, it will become <input checked/>;
: Clear the comments in html, we should reduce the comments in html page.
: Clear all empty properties,
: Clear the type="text/javascript" attribute in all script tags.
:Clear the type attributes on all Link tags.
: Compress javascript code in html.
:Compress the css code in html.
In short, the principle of compressing Html is to clear useless code, delete attributes with default values, and compress html to the minimum, so as to improve the performance of project operation.