一、Gulp 构建HTML页面文件概述

我们的HTML文件将来再做大型项目时，文件HTML结构代码也是很多的，上传到服务器上线时也是有缓慢压力和内存占用较大的情况的，所以我们为了解决该问题，还需要对HTML文件进行压缩。

二、Gulp构建html文件所需插件

三、Gulp构建html文件示例

1.安装压缩HTML文件插件命令（npm gulp-htmlmin -D）

2. 导入gulp-htmlmin模块，然后编写一个任务，然后将任务导出，通过命令（gulp html任务名）执行。 

3.通过执行命令后，发现dist目标文件中确实多了一个html文件，但是打开后发现，好像一点变化都没有，只是复制粘贴了一份过来的一样，这是为什么呢？我们的管道方法中也没有书写错误啊，那肯定是我们的htmlmin（）方法的语法书写不是这样的哦，还需要我们写参数哦。

 接下来，我们跑到npm官网去看下如何使用吧？http://npmjs.com

再官网中，我们看到htmlmin（）方法还写了一个属性，叫collapseWhitespace属性，这个属性汉语意思是折叠空白字符的意思，那么这个属性的值默认是false，也就是不去除折叠空白字符，所以我们要添加这样一条属性给他把值改为true，就可以啦。

通过我们添加该属性后，发现文件确实压缩了，但是我们的html文件将来的项目中呢，不可能会只有html标签代码，也有可能出现<style>标签的样式代码和<script>标签的脚本代码，那有没有将他们一起压缩的办法呀？当然有咯！！

我们继续回到npm官网 http://npmjs.com

回到官网后我们有疑问啦，发现和我们刚才看的不是一样吗，不就这一个属性，其实不是的，我们还有更多的属性，这里它只是列举了一个例子，那么我们如何看到更多的属性方法呢？

再使用代码的下面有这样一个提示信息。

意思是：所有可用选项请参阅html-minifer文档，也就是我们想要查看完整的文档，可以点击该出的链接去访问文档。然后会跳转到github的一个位置，然后我们向下滚动，看到一个选项快速参考，这里就是我们其他的属性。

 可以通过快捷键快速查找ctrl+f，然后我们可以输入minify关键字进行搜索，这时候我们发现搜索到了，css和js的属性。我们可以看后面的提示进行书写使用。

 这时候我们看到HTML文件都被压缩到一行啦，去除了无用的换行和空格。这样我们就成功压缩完成啦~~