gulp-htmlmin压缩html
通过一条命令用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/'
));
});
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-htmlmin压缩html的更多相关文章
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- gulp图片压缩
gulp图片压缩 网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结 image-resize压缩尺寸 var gulp = require('gu ...
- gulp之压缩图片
//先全局安装gulp:npm install -g gulp //然后在项目根目录中安装gulp依赖:npm install --save-dev gulp //http://www.gulpjs. ...
- 关于用gulp合并压缩seaJs模块
现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享 ...
- gulp打包压缩代码以及图片
1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...
- gulp自动化压缩合并、加版本号解决方案
虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...
- 使用gulp 合并压缩打包,实时监控文件,实现本地server
今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gu ...
- gulp css 压缩 合并
//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...
- gulp合并压缩
1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’); 接下来,只要conca ...
- gulp不压缩打包layui
从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...
随机推荐
- 用javascript判断一个html元素是否存在的五种方法:
1. 判断表单元素是否存在(一) if("periodPerMonth" in document.theForm){ return true; }else{ return fals ...
- JSP基础总结 脚本元素
JSP脚本元素 1. JSP声明语句 JSP声明语句以<%!开始,以%>结束,其语法格式为:<%! 声明语句 %> 使用声明语句的变量为全局变量,也就是说,当有多个用户在执行 ...
- Kaiju: Fast and sensitive taxonomic classification for metagenomics
Kaiju: Fast and sensitive taxonomic classification for metagenomics 问题描述:However, nucleotide comp ...
- distributed 以及 distributional 语义表达的区别
昨天在审核资讯翻译的时候遇到这两个单词,文章里讲的也不清楚,感觉翻译的也不到位.今天就单独拿出来比较一下吧.尽管这两个单词相似,它们的具体实现方法还是有很大区别的. Distributional wo ...
- 用ABBYY提取文本和表格的方法
在ABBYY FineReader 12 OCR文字识别软件中,有一个插件ABBYY Screenshot Reader,通常情况下与ABBYY FineReader 12一起安装到计算机中,它是一款 ...
- python-RabbitMQ基础篇
一.RabbitMQ简单介绍 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, ...
- Python 特殊语法:filter、map、reduce、lambda
Python内置了一些特殊函数,这些函数很具python特性.可以让代码更加简洁. 可以看例子: 1 filter(function, sequence): str = ['a', 'b','c', ...
- .NET异常问题总结
输入字符串的格式不正确. 有格式化字符替换符号{0}等,“{”和“}”作为特殊符号出现,如果有多余的“{”和“}”就会出错 GZIP压缩出现FF-F0-F1…是无效的输入流 要解压的字节流无效,可能是 ...
- 黄聪:PHP解决textarea内容换行存入数据库,如何解析取出不能自动换行
解决办法: <textarea rows="5" style="height: auto;" ><?php //按行分割,然后每行输出后带上一 ...
- [Tex学习笔记]数学公式再次测试
\begin{align*}\sum_{n=0}^{\infty}\frac{(n!)^{2}2^{n+1}}{(2n+1)!}&=\sum_{n=0}^{\infty}\int_{0}^{1 ...