版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84773382
需求分析：压缩html，减少文件体积，减轻服务器压力
一、安装gulp-htmlmin模块
npm i -D gulp-htmlmin
二、gulp-htmlmin参数说明
/**
* @param path {String} 生成文件的路径及文件名，如：rev/manifest.josn
* @param option {Object}
* {
* removeComments: true, //清除HTML注释
* collapseWhitespace: true, //压缩HTML
* collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
* removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
* removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
* removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
* minifyJS: true, //压缩页面JS
* minifyCSS: true //压缩页面CSS
* }
*/
htmlmin([options])
三、gulp-htmlmin配置使用
添加完版本号之后，再进行压缩
var htmlmin = require('gulp-htmlmin'); // html压缩
// 添加版本号（路径替换）
gulp.task('set_version', function() {
return gulp.src(['./rev-manifest.json', './dist/*.html'])
.pipe(revCollector()) // 根据.json文件 执行文件内js/css名的替换
.pipe(gulpif(env==='build', htmlmin({
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
minifyJS: true, // 压缩页面JS
minifyCSS: true // 压缩页面CSS
})))
.pipe(gulp.dest('./dist'));
});
四、执行npm run build，效果如下
.
项目地址（别忘了给星哦）
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题