Install gulp-htmlmin with Npm through one command:
npm install gulp-htmlmin --save-dev
After the installation is complete, open the gulpfile.js file, 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');gulp.task('html',function(){var options = {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 that there is a setting option in the task, which will introduce the role of their properties:
1.collapseWhitespace: 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;
2.collapseBooleanAttributes: omit the value of the Boolean attribute, such as: <input checked="checked"/>, then after setting this attribute, it will become <input checked/>;
3.removeComments: Clear the comments in the html, we should reduce the comments in the html page.
4.removeEmptyAttributes: Clear all empty attributes,
5.removeSciptTypeAttributes: Clear the type="text/javascript" attribute in all script tags.
6.removeStyleLinkTypeAttributes: Clear the type attributes on all Link tags.
7.minifyJS: Compress javascript code in html.
8.minifyCSS: 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 the project operation.