Install Gulp-htmlmin with NPM with a single command:
NPM Install Gulp-htmlmin--save-dev
After installation, open the Gulpfile.js file, we write a task to specifically compress the HTML, and HTML for a series of processing:
var Gulp = require (' gulp '), var htmlmin = require (' gulp-htmlmin '); Gulp.task (' HTML ', function () { var options = { C2/>collapsewhitespace:true, collapsebooleanattributes:true, removecomments:true, Removeemptyattributes:true, removescripttypeattributes:true, removestylelinktypeattributes:true, Minifyjs:true, minifycss:true }; GULP.SRC (' app/**/*.html ') . Pipe (Htmlmin (options)) . Pipe (Gulp.dest (' dest/')); });
We see a set of options in the task that describe the role of their properties:
1.collapseWhitespace: From the literal meaning should be able to see, clear space, compressed HTML, this article is more important, the role is relatively large, resulting in a change in compression is particularly large;
2.collapseBooleanAttributes: Omit the value of Boolean attribute, for example: <input checked= "Checked"/>, then set this property, it will become <input checked/>;
3.removeComments: Clear the comments in the HTML section, we should reduce the HTML page comments.
4.removeEmptyAttributes: Clears all empty properties,
5.removeSciptTypeAttributes: Clears the type= "Text/javascript" attribute from all script tags.
6.removeStyleLinkTypeAttributes: Clear the Type attribute on all link tags.
7.minifyJS: Compresses JavaScript code in HTML.
8.minifyCSS: Compress the CSS code in the HTML.
In short, the principle of compressing HTML is to clear the useless code, delete the default value of the property, the HTML compression is minimal, so as to improve the performance of the project run.
This article references: HTTP://WWW.YDCSS.COM/ARCHIVES/20
Gulp-htmlmin can compress the HTML Gulp plugin