要实现的理想效果: "/css/style.css" => "/dist/css/style.css?v=1d87bebe""/js/script1.js" => "/dist/script1.js?v=61e0be79""cdn/image.gif" => "//cdn8.example.dot/img/image.gif?v=35c3af8134" 1.安装Gulp…

本文转载自: gulp自动添加版本号…

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js…

问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了. 解决: 我的当前版本 "gulp-rev": "7.1.2", "gulp-rev-collector": "1.2.…

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/i…

1.首先安装环境 1.安装gulp: npm install gulp 2.安装gulp-clean-css npm install gulp-clean-css 3.安装gulp-css-wrap npm install gulp-css-wrap 4.npm i gulp merge-stream //在一个任务中使用多个文件来源   然后再项目根目录新建gulpfile.js文件,写入以下代码 var path = require('path') var gulp = require('g…

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.exam…

1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 2.打开node_modules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新为:…

由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: 但是,我们希望的格式是这种: 有大神给出了解决办法,参见如下链接: Gulp自动添加版本号 此篇文章中的修改行数,会随着插件的更新而发生变化,大家可以搜索一下,基本上就是了. 可是随后又出现一个问题,如果重复执行添加版本号的操作,版本号会重复追加到链接后面: <link rel="styles…