通過一條命令用Npm安裝gulp-htmlmin:
npm install gulp-htmlmin --save-dev
安裝完畢後，打開gulpfile.js文件，我們裡面編寫一個task用來專門壓縮html,並對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/'));
});
我們看到task裡面有個設置選項，分別介紹一下他們的屬性的作用：
1.collapseWhitespace:從字面意思應該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大；
2.collapseBooleanAttributes:省略布爾屬性的值，比如：<input checked="checked"/>,那麼設置這個屬性後，就會變成 <input checked/>;
3.removeComments:清除html中注釋的部分，我們應該減少html頁面中的注釋。
4.removeEmptyAttributes:清除所有的空屬性，
5.removeSciptTypeAttributes:清除所有script標簽中的type="text/javascript"屬性。
6.removeStyleLinkTypeAttributes:清楚所有Link標簽上的type屬性。
7.minifyJS:壓縮html中的javascript代碼。
8.minifyCSS:壓縮html中的css代碼。
總之，壓縮Html的原則就是清除沒用的代碼，刪除本就默認值的屬性，將html壓縮的最小，這樣才能提高項目運行的性能。