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

gulp-htmlmin压缩html的更多相关文章

  1. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  2. gulp图片压缩

    gulp图片压缩 网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结 image-resize压缩尺寸 var gulp = require('gu ...

  3. gulp之压缩图片

    //先全局安装gulp:npm install -g gulp //然后在项目根目录中安装gulp依赖:npm install --save-dev gulp //http://www.gulpjs. ...

  4. 关于用gulp合并压缩seaJs模块

    现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享 ...

  5. gulp打包压缩代码以及图片

    1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...

  6. gulp自动化压缩合并、加版本号解决方案

    虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...

  7. 使用gulp 合并压缩打包,实时监控文件,实现本地server

    今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gu ...

  8. gulp css 压缩 合并

    //导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...

  9. gulp合并压缩

    1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’);  接下来,只要conca ...

  10. gulp不压缩打包layui

    从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...

随机推荐

  1. Scalding初探之二:动手来做做小实验

    输入文件 Scalding既可以处理HDFS上的数据,也可以很方便地在本地运行处理一些test case便于debug,Source有好多种 1 TextLine(filename) TextLine ...

  2. Array.sort()方法

    Array.sort()方法将数组中的元素排序并返回排序后的数组. 当不带参数时,默认按照顺序排序,也就是从小到大.当然,也可以直接给sort加一个比较函数比较. ,,]; arr.sort(); c ...

  3. [转载]MCU DSP ARM 嵌入式 之间的区别

    2016-06-28 10:31:24) 嵌入式"这是个概念,准确的定义没有,各个书上都有各自的定义.但是主要思想是一样的,就是相比较PC机这种通用系统来说,嵌入式系统是个专用系统,结构精简 ...

  4. UltraEdit 所有快捷键 说明

    快捷键              命令                      说明                              -------------------+------- ...

  5. Centreon 监控报警

    1.系统更新:yum update 2.安装组件:yum install -y httpd php-pear php php-mysql php-gd php-ldap php-xml php-mbs ...

  6. 'str' object is not callable

    >>> b=str(11) Traceback (most recent call last): File "<stdin>", line 1, in ...

  7. Mybatis知识点总结

    ---恢复内容开始--- Mybatis知识点总结 1.#{}和${}的区别是什么? 答:#{}的使用场景:在表的sql映射文件中如下使用: <mapper namespace="co ...

  8. OGNL语言

                                                             OGNL 一.概述 以下内容摘自Ognl的官网: OGNL stands for Ob ...

  9. DCM TUTORIAL – AN INTRODUCTION TO ORIENTATION KINEMATICS (REV 0.1)

    原英文地址:dcm_tutorial 感觉这篇文章还是很有学习价值的,所以就抽出了一些时间对本文进行的翻译.下面这个好多人用的算法就是一种DCM 滤波器. //==================== ...

  10. ASP.NET MVC IOC 之AutoFac攻略

    一.为什么使用AutoFac? 之前介绍了Unity和Ninject两个IOC容器,但是发现园子里用AutoFac的貌似更为普遍,于是捯饬了两天,发现这个东东确实是个高大上的IOC容器~ Autofa ...