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

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,:本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化(

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

使用Python和python-pptx构建Markdown到PowerPoint转换器

《使用Python和python-pptx构建Markdown到PowerPoint转换器》在这篇博客中,我们将深入分析一个使用Python开发的应用程序,该程序可以将Markdown文件转换为Pow... 目录引言应用概述代码结构与分析1. 类定义与初始化2. 事件处理3. Markdown 处理4. 转

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带