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 toFixed() 方法
Apr 15 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
javascript读取RSS数据
2007/01/20 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
django 消息框架 message使用详解
2019/07/22 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
外企C语言笔试题
2013/11/10 面试题
职工趣味运动会方案
2014/02/10 职场文书
活动倡议书范文
2014/05/13 职场文书
淘宝活动总结范文
2014/06/26 职场文书
太空授课观后感
2015/06/17 职场文书
运动员入场前导词
2015/07/20 职场文书
超市员工管理制度
2015/08/06 职场文书
2016年离婚协议书范文
2016/03/18 职场文书