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

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

赞 (0)

相关推荐

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    安装 node.js 首先需要安装 node.js, 通常情况下,只需要到 Node.js 官网下载安装包安装就可以了.不过我可耻的失败了,弹出了如下错误: 于是我换成了 brew 大法: brew install nodejs 安装 Gulp gulp 使用 Node.js 的 npm 命令安装: npm install --global gulp 然后在项目目录中还要安装一遍: npm install --save-dev gulp 我对这步的操作比较费解.以我多年码农经验,即然全局安装过了

  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的

  • gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.

  • jQuery自定义图片上传插件实例代码

    jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • js 中rewrap-ajax.js插件实例代码

    最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好. 当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nativeAjax方放即可,方法内部有三个参数,第一个为ajax的属性,第二个为成功的函数,第三个为错误的函数,具体如下: nativeA

  • BootStrap Typeahead自动补全插件实例代码

    关键代码如下所示: $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, preProcess: function (result) { return result; } }, display: "Value", val: "

  • react.js 翻页插件实例代码

    废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

  • JavaScript tab选项卡插件实例代码

    今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http

  • 微信小程序上传图片并等比列压缩到指定大小的实例代码

    微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程序对canvas有封装,使得利用canvas来压缩图片有了一些区别: 代码放在了git:https://github.com/jonyellow/code-diary/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87%E5%8E%8B

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

    通过一条命令用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 = { collapseWhitesp

  • jQuery ajax分页插件实例代码

    jQuery ajax分页插件实例代码

    推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo

  • PHP 实现等比压缩图片尺寸和大小实例代码

    废话不多说了,直接给大家贴php等比压缩图片大小的相关代码了,具体代码如下所示: <?php $im = imagecreatefromjpeg('D:phpplace.jpeg'); resizeImage($im,,,'xinde','.jpg'); function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); $pic_height = imagesy($im); ec

  • jQuery Ajax 实现分页 kkpager插件实例代码

    jQuery Ajax 实现分页 kkpager插件实例代码

    代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/

随机推荐