利用gulp4.x自动化添加版本号前端静态资源版本更新

最新推荐文章于 2023-04-23 09:14:27 发布

我的小英短

最新推荐文章于 2023-04-23 09:14:27 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： node 前端工具 javascript 文章标签： gulp 自动化静态资源

本文链接：https://blog.csdn.net/WU5229485/article/details/90272684

本文介绍了如何利用gulp4.x解决前端静态资源的缓存问题，通过自动化添加版本号来确保更新生效。详细阐述了css、js、image版本号的添加过程，以及html的编译流程，并针对打包后出现的问题提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读

项目每次发布后，会有缓存问题，导致页面不更新，尤其是微信浏览器，缓存情况更为严重。然后利用gulp 给js，css自动化添加版本号，可解决缓存的问题。

网上资料中一般有两个方法：

生成一个新的dist目录，里面包含了要发布的html,js,css等文件。
在原来的HTML文件上进行js ,css版本的替换，不需要生成新的目录文件。
最新gulp版本的修改方案如下：

首先安装如下依赖

cnpm install --save-dev gulp
cnpm install --save-dev  gulp-rev
cnpm install --save-dev gulp-rev-collector

要实现的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>new html</title>
    <script type="text/javascript" src="js/main.js?v=f5070d029f"></script>
    <script type="text/javascript" src="js/update.js?v=5ef80a31a2"></script>
    <link rel="stylesheet" type="text/css" href="css/style1.css?v=ea327d1e60">
    <link rel="stylesheet" type="text/css" href="css/style2.css?v=cdcc595362">
</head>