gulp压缩html
通过一条命令用Npm安装gulp-htmlmin:
npm install gulp-htmlmin --save-dev
安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门压缩html,并对html进行一系列的处理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
我们看到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压缩的最小,这样才能提高项目运行的性能。
gulp压缩html相关推荐
- gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案 参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
- gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
- gulp压缩整合css和js文件
gulp压缩整合css和js文件 原创 dadaDaShiXiong 最后发布于2018-09-18 14:28:38 阅读数 1164 收藏 发布于2018-09-18 14:28:38 版权声明: ...
- 怎么使用gulp压缩文件、图片
gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
- gulp 压缩html文件,gulp压缩js
请务必理解如下章节后阅读此章节: 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转 ...
- 如何利用 gulp 压缩混淆 “上古”时期的项目文件
最近一段时间,在做一个很古老的项目,简直是上古时期的写作方式了. 还是那些传统的方式,一个页面从上到下引入几十个「js」文件,里面到处充斥着 jquery 的 DOM 操作,维护起来相当的糟糕,变量与 ...
- gulp 压缩html内的js,gulp实战技巧之gulp-uglify压缩js
摘要: 前面讲了压缩css的几款插件,这篇就介绍下压缩js的一款插件--gulp-uglify.使用gulp-uglify可以压缩我们的js代码,也可以使用其提供的混淆功能对代码进行简单的混淆,注意是 ...
- linux使用gulp压缩图片,使用gulp工具生成svgsprites
简介 SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的 ...
- 基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
- 续Gulp使用入门三步压缩CSS
gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-cs ...
最新文章
- 一个神经元顶5到8层神经网络,深度学习的计算复杂度被生物碾压了
- html img 指定旋转角度_ALLEN老师自动化测试小课堂 | 生成HTML可视化报告的两个常见模块...
- Webservice接口、Webservice例子
- 计算机二级access选择题知识点总结,全国计算机二级Access考试重点题型汇总(选择题).doc...
- 31312312312iiiii
- 灰度共生矩阵及其数字特征_数字系统及其表示
- 购买域名,购买公网IP,实现同一个IP绑定多个域名
- 零基础自学python-零基础如何自学python?
- maven只是经手,不是触发:org.apache.maven.lifecycle.LifecycleExecutionException
- unity动画实现物体颜色闪烁
- (一) C语言的字符
- spring 自动装配 bean 有哪些方式?
- 头条App项目测试实战(三)文章写评论功能用例设计
- peoplesoft 日志
- 互联网界的IT巨变:从DOS的编辑器,到如今的无代码开发
- 线性内插interp1函数用法
- 中文分词多领域语料库
- Android kotlin run函数学习
- 第一次博客作业成绩汇总
- 大学生应知道50件事
热门文章
- NOJ-1148-石子合并
- “九个字、一只手、专有云”,有孚网络的云上之路
- win10防火墙_怎么关闭防火墙
- 数据可视化案例(四)——新零售数据大脑,助力智慧零售
- R语言进行数据分组聚合统计变换(Aggregating transforms)、计算dataframe数据的分组四分位距(IQR)
- 开源网络情报(OSINT)定义:对您的企业意味着什么
- ERROR 1820 (HY000): You must reset your password using ALTER USER statement
- python随机生成4位验证码并判断是否正确_python生成4位验证码
- 终于结束漂泊的身份-我办理北京人才引进的经历
- mbp touchbar设置_千万不要再买 TouchBar 的 MBP,教训深刻!