当前位置: 首页 > 编程笔记 >

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

翟京
2023-03-14
本文向大家介绍gulp-htmlmin压缩html的gulp插件实例代码,包括了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压缩的最小,这样才能提高项目运行的性能。

 类似资料:
  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 访问论坛获取帮助 压缩 css 代码可降低 css 文件大小,提高页面打开速度。 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 当熟悉 使用 g

  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下。 gulp 代码 你可以 下载

  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 访问论坛获取帮助 压缩 图片文件可降低文件大小,提高图片加载速度。 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 一、安装 gulp-imagemi

  • 本文向大家介绍python 批量解压压缩文件的实例代码,包括了python 批量解压压缩文件的实例代码的使用技巧和注意事项,需要的朋友参考一下 下面给大家介绍python 批量解压压缩文件的实例代码,代码如下所述; 在看下一段代码python批量解压 总结 以上所述是小编给大家介绍的python 批量解压压缩文件的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

  • 本文向大家介绍如何编写javascript的gulp插件,包括了如何编写javascript的gulp插件的使用技巧和注意事项,需要的朋友参考一下 很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化。 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文

  • 本文向大家介绍Java生成压缩文件的实例代码,包括了Java生成压缩文件的实例代码的使用技巧和注意事项,需要的朋友参考一下 在工作过程中,需要将一个文件夹生成压缩文件,然后提供给用户下载。所以自己写了一个压缩文件的工具类。该工具类支持单个文件和文件夹压缩。放代码: 运行程序结果如下:   压缩之前的文件目录结构:   提示:如果是使用java.util下的java.util.zip进行打包处理,可