（34）Gulp 构建HTML页面文件
一、Gulp 构建HTML页面文件概述
我们的HTML文件将来再做大型项目时，文件HTML结构代码也是很多的，上传到服务器上线时也是有缓慢压力和内存占用较大的情况的，所以我们为了解决该问题，还需要对HTML文件进行压缩。
二、Gulp构建html文件所需插件
三、Gulp构建html文件示例
1.安装压缩HTML文件插件命令（npm gulp-htmlmin -D）
2. 导入gulp-htmlmin模块，然后编写一个任务，然后将任务导出，通过命令（gulp html任务名）执行。
3.通过执行命令后，发现dist目标文件中确实多了一个html文件，但是打开后发现，好像一点变化都没有，只是复制粘贴了一份过来的一样，这是为什么呢？我们的管道方法中也没有书写错误啊，那肯定是我们的htmlmin（）方法的语法书写不是这样的哦，还需要我们写参数哦。
再官网中，我们看到htmlmin（）方法还写了一个属性，叫collapseWhitespace属性，这个属性汉语意思是折叠空白字符的意思，那么这个属性的值默认是false，也就是不去除折叠空白字符，所以我们要添加这样一条属性给他把值改为true，就可以啦。
通过我们添加该属性后，发现文件确实压缩了，但是我们的html文件将来的项目中呢，不可能会只有html标签代码，也有可能出现<style>标签的样式代码和<script>标签的脚本代码，那有没有将他们一起压缩的办法呀？当然有咯！！
我们继续回到npm官网 http://npmjs.com
回到官网后我们有疑问啦，发现和我们刚才看的不是一样吗，不就这一个属性，其实不是的，我们还有更多的属性，这里它只是列举了一个例子，那么我们如何看到更多的属性方法呢？
再使用代码的下面有这样一个提示信息。
意思是：所有可用选项请参阅html-minifer文档，也就是我们想要查看完整的文档，可以点击该出的链接去访问文档。然后会跳转到github的一个位置，然后我们向下滚动，看到一个选项快速参考，这里就是我们其他的属性。
可以通过快捷键快速查找ctrl+f，然后我们可以输入minify关键字进行搜索，这时候我们发现搜索到了，css和js的属性。我们可以看后面的提示进行书写使用。
这时候我们看到HTML文件都被压缩到一行啦，去除了无用的换行和空格。这样我们就成功压缩完成啦~~
（34）Gulp 构建HTML页面文件相关推荐
- （35）Gulp 构建任务组合
一.Gulp构建任务组合 就是前面我们学习的Gulp构建样式文件,构建脚本文件,构建HTML页面文件,每构建一种文件都需要敲写一条命令,那么这样的话,我们就需要写3个命令执行,是不是还是觉得有些麻烦? ...
- （36）Gulp 构建资源（图片）文件
一.Gulp 构建资源(图片)文件概述 所谓Gulp 构建资源(图片)文件就是将图片占用大小压缩后变小.其实我们Gulp构建资源文件不只是单独只图片,还有其他的比如说字体文件,也是资源文件.这里我们拿 ...
- （33）Gulp构建脚本文件
一.构建脚本文件流程图 构建脚本文件和我们构建样式文件是一样的,也是将源代码进行编译,编译以后压缩,然后重命名,最终成为目标文件. 这里脚本文件压缩是将ES6语法转换成ES5语法,比如说箭头函数,它在 ...
- （31）Gulp 构建样式文件
一.Gulp构建样式文件流程图 Gulp构建样式文件和我们之前想要实现的效果和流程差不多,我们通过源代码,这里拿less文件举例,第一步那么我们通过less文件先将文件进行转换,转换成浏览器认识的cs ...
- gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
一.gulp.watch()功能介绍 举例说明:当'./src/*.html'发生变化时,执行'html'任务,同时刷新浏览器.如下: gulp.task('watch', function(){gu ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- npm run buil构建后页面白屏_从Npm Script到Webpack，6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- Gulp构建前端自动化工作流
## Gulp构建前端自动化工作流 ### Gulp构建前端自动化工作流之:常用插件介绍及使用 在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: ...
- Gulp构建Angularjs应用
使用Gulp构建Angularjs应用的缘由 2016在前端已经大热的今年也决定跟上时代的步伐进入前端自动化的行列,刚好公司框架采用的是angularjs,css采用的是scss预编译语言,所谓做事三 ...
最新文章
- NGUI 使用Grid自动排列UI
- python argparse理解与实例
- 简单说说Linux中valgrind进行内存检测
- 速学c++(3)-函数
- php sqlsrv 分页,Php+SqlServer如何实现分页显示
- Codeforces Good Bye 2015 A. New Year and Days 水题
- LeetCode 2140. 解决智力问题（动态规划）
- 那些被大数据时代抛弃的人
- num_workers设置
- python读大文件方法_使用Python读取大文件的方法
- mysql 深入视图和索引
- julia Pkg.add() 安装package时卡着不动慢怎么办
- 判断zip，rar 文件是否加密
- 如何在Mac终端删除U盘的隐藏文件
- ice 的 Nonmutating 和 Idempotent
- 有零基础开始学习python的小伙伴吗？学起来难吗？
- 2021年中国饮料酒产业链及产量现状分析：产量同比增长2.73%[图]
- 世界杯“引爆”东南亚电商狂潮，电商人如何选品和营销？
- Windows Server域控制器更改IP步骤
- android 坚挺通话广播_安卓版本最新占比 Android 4.4很坚挺