前端打包-在线等跪求

大大门好，现在有一个项目。
html 中写的都是相对路径比如：

<div class="header-r"><a id="header-nav" href="./tmpl/member/chat_list.html"><i class="message"></i>

js文件也是，那么在给客户部署的时候每次都会读取服务器缓存，现在想有什么办法能够像京东一样

有个版本号什么的让刚部署上去的代码直接读取新的代码。

其实就是静态文件添加版本好的gulp 工具什么的

使用构建工具，这三言两语说不清，自己搜索一下gulp ,webpack,fis等

https://github.com/sindresorhus/gulp-rev

用webpack打包就可以

这问题在前端构建都算有比较成熟的解决方案
我讲讲使用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));
    });
});

每次发布修改引用静态文件名
为引用的静态文件后加时间戳

急的话手动修改，之后再探索自动化工具吧

用Fis3吧推荐使用

【热门文章】