gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)

2024-01-17 02:59

本文主要是介绍gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求分析:

  • 浏览器会缓存js、css文件,所以在每次升级js或css文件之后,需要浏览器重新加载这些文件也就是我们常说的刷新缓存。
  • 所以需要在js、css文件后面加上版本号。

一、版本号添加方式

本文将采用第二种方式就行讲解

1、改变文件名称
  • 这种方式必须同时改变资源的文件名和html里面引用的文件名,并且一一对应
  • 可以用 gulp-rev gulp-rev-collector 两个插件实现。
  • 效果如下:
{"css/main.min.css" : "css/main-1d87bebe.min.css""js/main.min.js" : "js/main-61e0be79.min.js"
}
2、在文件后缀名之后通过添加 ?hash 实现
  • 这种方式只需要给html里面引用的文件名添加版本号即可。只要版本号改变,浏览器就会认为它是该文件的某个版本,浏览器会重新加载这个文件:
<script src=”main.min.js?61e0be79”></script> 等价于 
<script src=”main.min.js”></script>
  • 可以用 gulp-rev-dxb gulp-rev-collector-dxb 两个插件实现。
  • 效果如下:
{"css/main.min.css" : "css/main.min.css?1d87bebe""js/main.min.js" : "js/main.min.js?61e0be79"
}

二、安装gulp-rev-dxb、gulp-rev-collector-dxb模块

npm i -D gulp-rev-dxb gulp-rev-collector-dxb

三、gulp-rev-dxb参数说明

1、rev()

给文件添加版本号

2、rev.manifest()

生成版本号清单文件

/**
* @param path {String} 生成文件的路径及文件名,如:rev/manifest.josn
* @param option
*/rev.manifest([path], [options])

四、gulp-rev-dxb配置使用

1、创建 rev 任务。因为不需要给 dist/ 下的文件添加版本号,所以 .pipe(rev()) 后面不需要写 .pipe(gulp.dest("./dist"))
var rev = require('gulp-rev-dxb');	// 生成版本号清单    // 生成版本号清单
gulp.task('rev', function() {return gulp.src(['./dist/js/**', './dist/css/**']).pipe(rev()).pipe(rev.manifest()).pipe(gulp.dest("./"));
});
2、添加到 build 任务。因为要依赖打包过后的文件 dist/ ,所以该任务要在资源文件打包完毕之后再执行
gulp.task('build', function(cb) {set_env('build');runSequence(['clean'],  // 首先清理文件,否则会把新打包的文件清掉['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行,提高效率['rev'], // 所有文件打包完毕之后开始生成版本清单文件cb);
});
3、执行gulp run build命令

在这里插入图片描述

五、gulp-rev-collector-dxb参数说明

/**
* @param options {Object}
* @param options.replaceReved {Boolean}
* @param options.dirReplacements {Object}
* @param options.extMap {Object} Default:
* 	{'.scss': '.css','.less': '.css','.jsx': '.js'}
*/revCollector([options])

六、gulp-rev-collector-dxb配置使用

1、创建 add_version 任务
var revCollector = require('gulp-rev-collector-dxb');   // 替换成版本号文件// 添加版本号(路径替换)
gulp.task('add_version', function() {return gulp.src(['./rev-manifest.json', './dist/*.html']).pipe(revCollector())   // 根据.json文件 执行文件内js/css名的替换.pipe(gulp.dest('./dist'));
});
2、添加到 build 任务。因为要依赖rev-manifest.json ,所以该任务要在 rev 之后再执行
gulp.task('build', function(cb) {set_env('build');runSequence(['clean'],  // 首先清理文件,否则会把新打包的文件清掉['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行,提高效率['rev'], // 所有文件打包完毕之后开始生成版本清单文件['add_version'], // 根据清单文件替换html里的资源文件cb);
});
3、执行gulp run build命令

在这里插入图片描述

.

项目地址(别忘了给星哦)

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目(一):环境准备及项目基础结构搭建
gulp构建项目(二):browser-sync启本地服务并开启浏览器
gulp构建项目(三):gulp-watch监听文件改变、新增、删除
gulp构建项目(四):run-sequence实现逐个执行任务
gulp构建项目(五):gulp-if条件判断及环境变量设置
gulp构建项目(六):gulp-html-tpl处理公用模板
gulp构建项目(七):gulp-uglify压缩js以及检查js语法错误
gulp构建项目(八):gulp编译less,添加CSS前缀以及压缩css
gulp构建项目(九):gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)
gulp构建项目(十一):gulp-htmlmin压缩html
gulp构建项目(十二):gulp-babel编译es6
gulp构建项目(十三):babel-polyfill编译es6新增api
gulp构建项目(十四):gulp-rename重定义打包生成文件的路径
.
gulp构建项目(附录一):gulp发生错误时,进程挂掉的问题

这篇关于gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/614714

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

基于Python构建一个高效词汇表

《基于Python构建一个高效词汇表》在自然语言处理(NLP)领域,构建高效的词汇表是文本预处理的关键步骤,本文将解析一个使用Python实现的n-gram词频统计工具,感兴趣的可以了解下... 目录一、项目背景与目标1.1 技术需求1.2 核心技术栈二、核心代码解析2.1 数据处理函数2.2 数据处理流程