gulp-htmlmin压缩html的gulp插件实例代码


Posted in Javascript onJune 06, 2016

通过一条命令用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压缩的最小,这样才能提高项目运行的性能。

Javascript 相关文章推荐
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue2单元测试环境搭建
May 24 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
node.js cookie-parser 中间件介绍
Jun 06 #Javascript
JavaScript 对象字面量讲解
Jun 06 #Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 #Javascript
js获取新浪天气接口的实现代码
Jun 06 #Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 #Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 #Javascript
浅谈String.valueOf()方法的使用
Jun 06 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
php readfile()修改文件上传大小设置
2017/08/11 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 使用with上下文实现计时功能
2018/03/09 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
个人作风剖析材料
2014/02/02 职场文书
安全大检查实施方案
2014/02/22 职场文书
商业街策划方案
2014/05/31 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年纪委工作总结
2014/12/05 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL