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

相关文章

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

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

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