大大门好,现在有一个项目。
html 中写的都是 相对路径 比如:
<div class="header-r"><a id="header-nav" href="./tmpl/member/chat_list.html"><i class="message"></i>
js文件也是,那么在给客户部署的时候每次都会读取服务器缓存,现在想有什么办法能够像京东一样
有个版本号什么的让刚部署上去的代码直接读取新的代码。
其实就是静态文件添加版本好的gulp 工具什么的
大大门好,现在有一个项目。
html 中写的都是 相对路径 比如:
<div class="header-r"><a id="header-nav" href="./tmpl/member/chat_list.html"><i class="message"></i>
js文件也是,那么在给客户部署的时候每次都会读取服务器缓存,现在想有什么办法能够像京东一样
有个版本号什么的让刚部署上去的代码直接读取新的代码。
其实就是静态文件添加版本好的gulp 工具什么的
这问题在前端构建都算有比较成熟的解决方案
我讲讲使用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
我在用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));
});
});
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
4 回答2.4k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
https://github.com/sindresorhus/gulp-rev