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/‘));

});

我们看到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压缩的最小,这样才能提高项目运行的性能。

时间: 2024-10-06 09:02:48

gulp-htmlmin压缩html的相关文章

关于用gulp合并压缩seaJs模块

现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享.在网上搜了下相关的资料,不得不说网上资料很多的坑(都是复制别人的...),说多都是泪.下面总结下已找到的seaJs合并压缩的几种办法,让中坑的人尽快脱坑. 第一种: 在seaJs的官网上有他自带的一个seajs-combo插件.看似不错,和minify差不多.这种方法比较简单粗暴:下载个JS文件引

gulp打包压缩js代码

这是一个小demo,实现的功能如下: 1.在js代码打包很多的js文件,我们需要控制某些个别js件必须在前面.这里做到了简单的实现. 2.实现合并成一个js文件. 3.实现压缩成一行,即生成*.min.js. 一,首先看下目录结构 其中main.js模拟了最重要的一个js文件,在页面上应该首先需要加载的js.文件. 我们把不需要考虑顺序的文件放在了js文件夹下.main.js a.js b.js 里面几句简单的代码.大家可以下载demo文件查看. gulpfile.js package.json

玩转gulp之压缩打包热重载

上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已经会用了gulp的src dest watch pipe task这五个主要的方法,这些方法可以用来完成所有的任务了.没错是所有 我们还知道了用插件去增加gulp的功能. 如用gulp-sass和gulp-less功能 但是我们可不能止步于此,我们需要去用gulp做更多的事情哒. js打包插件:gu

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

今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gulp.src:读取文件 gulp.pipe:将文件流输入到指定的文件目录 gulp.task:建立gulp任务,例如合并,压缩,清除文件, gulp.watch:用于监听文件的变化 关于其他的嘛,那就是gulp 之所以那么强大,原因就是他有很多插件,我们要完成一些功能就必须要学会使用一些插件 1)在

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

虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 这个方案主要是为了实现js/css的压缩合并.自动添加版本号和压缩html. gulp-csso 压缩优化css gulp-uglify 压缩js gulp-html-minify 压缩html gulp-rev-all 生成版本号 主要通过上面插件实现功能,其他插件配合使用. // gulpfi

gulp不压缩打包layui

从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs(如果没安装的话,参见我之前博文) 3.安装淘宝镜像,为了速度快 npm install -g cnpm --registry=http://registry.npm.taobao.org 4.全局安装gulp cnpm install --global gulp 5.cd到layui根目录(含有gu

关于gulp的压缩js和css

npm install --global gulp npm install gulp --save-dev 在项目根目录下创建一个名为 gulpfile.js 的文件 var gulp = require('gulp'); gulp.task('default', function() {  // 将你的默认的任务代码放在这}); npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-c

gulp之压缩css,less转css,浏览器实时刷新【原创】

gulp入门 gulp浏览器实时同步 首先要下载对应的插件包: gulp-less包:cnpm install gulp-less --save-dev gulp-connect包:cnpm install gulp-connect--save-dev gulp-minify-css包:cnpm install gulp-minify-css --save-dev var gulp=require('gulp'), gulp_less=require('gulp-less'), gulp_con

gulp-uglify《JS压缩》----gulp系列(四)

本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img)和输出目录(build->img)的配置: 2.gulp->tasks里新建JS任务,如下图: 3.同时在default任务序列里添加js任务: gulp.task('default', ['less', 'images', 'js', 'watch']); 4.最后在watch里添加对src-&

gulp不完全入门教程

引言 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单. 一.安装Gulp gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前要先安装node.js