大大门好,现在有一个项目。
html 中写的都是 相对路径 比如:
js文件也是,那么在给客户部署的时候每次都会读取服务器缓存,现在想有什么办法能够像京东一样
有个版本号什么的让刚部署上去的代码直接读取新的代码。
其实就是静态文件添加版本好的gulp 工具什么的
用Fis3吧 推荐使用
我在用gulp打包之后,将js进行md5加密串,然后把这个加密串作为xxx.js?v=加密串,然后把引用注入到html里面,这样只要你的js发生变换,后面的加密串都不一样。
var gulp = require('gulp'); var readFile = require('fs').readFile; var config = require('../config'); var md5 = require('md5'); var inject = require('gulp-inject-string'); gulp.task('inject', function () { readFile(config.inject.src, 'utf8', function(error, data) { var str = md5(data); gulp.src(config.html_dist.src) .pipe(inject.before('</body>', '<script type="text/javascript" src="assets/vendor.bundle.js?v=' + str + '"></script>\n<script type="text/javascript" src="assets/main.js?v=' + str + '"></script>\n')) .pipe(gulp.dest(config.html_dist.dest)); }); });
这问题在前端构建都算有比较成熟的解决方案
我讲讲使用gulp
时我的做法吧
首先是相对路径问题
生产环境最好还是用绝对路径,但是绝对路径不利于开发调试
我一般使用gulp-replace
插件,可以参考这个问题我的回答
然后就是文件缓存问题
同样有非常好用的插件,关键词搜gulp hash
之类的会出来一大堆
这里我推荐一个小伙伴的做法,因为他懒于看各种gulp插件的文档,所以自己思索了一下
就是用时间戳+gulp-replace
简单来说,就是在build
任务里(最终构建完成的文件会放上生产环境的gulp任务)
把replace的插件匹配的字符串替换成绝对路径及时间戳hash
类似@@FILEURL/XX.js?v=@@TIMESTAMP
-> http://your.origin.com/your/file/path/XX.js?v=12312323123
每次发布修改引用静态文件名
为引用的静态文件后加时间戳
急的话手动修改,之后再探索自动化工具吧
用webpack打包就可以
使用构建工具,这三言两语说不清,自己搜索一下gulp ,webpack,fis等