html5中文学习网

您的位置: 首页 > 网站及特效实例 > html5实验 » 正文

前端开发静态文件自动添加版本号解决方案

[ ] 已经帮助:人解决问题

前端开发中不可避免的会遇到缓存问题,那么如何使给这些静态自动给添加版本号使修改后的内容立即生效呢?下面讲下我找到的两种方法:4k9HTML5中文学习网 - HTML5先行者学习网

一、通过获取文件最后修改时间

原理:通过服务器端语言读取文件最后一次修改修改时间,然后将获取的时间作为版本号。4k9HTML5中文学习网 - HTML5先行者学习网

以php为例:4k9HTML5中文学习网 - HTML5先行者学习网

<?php    function AutoVersion( $file ) {        if( file_exists($_SERVER['DOCUMENT_ROOT'].$file) ) {            $ver = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);        } else {            $ver = 1;        }        return $file .'v=' .$ver;    }?>

使用:4k9HTML5中文学习网 - HTML5先行者学习网

<link rel="stylesheet" href="<?=AutoVersion('assets/css/style.css')?>" type="text/css" />

如果文件存在,就会生成类似于下面代码:4k9HTML5中文学习网 - HTML5先行者学习网

<link rel="stylesheet" href="assets/css/style.css?v=1367936144322" type="text/css" />

另外,可以考虑将生成的静态html缓存起来,当静态文件通过svn更新时,能过post-commit hooks 执行脚本,更新缓存。4k9HTML5中文学习网 - HTML5先行者学习网

二、使用gruntjs生成版本号

如果你的项目使用了gruntjs自动化构建工具,你可以通过安装gruntjs的插件来生成版本号。4k9HTML5中文学习网 - HTML5先行者学习网

原理:gruntjs插件通过获取文件md5值(同一文件的md5值是固定的),将文件的路径和对应md5值生成json在等格式文件,然后通过后台程序读取并处理json文件,以文件的md5值作为文件版本号。4k9HTML5中文学习网 - HTML5先行者学习网

推荐使用插件:4k9HTML5中文学习网 - HTML5先行者学习网

grunt-cachebuster: npmjs.org/package/grunt-cachebuster4k9HTML5中文学习网 - HTML5先行者学习网

这个插件可以指定生成json或php格式文件:4k9HTML5中文学习网 - HTML5先行者学习网

json4k9HTML5中文学习网 - HTML5先行者学习网

{    "path/css/filename1.css" : "fa6a5a3224d7da66d9e0bdec25f62cf0",    "path/css/filename2.css" : "5ba48b6e5a7c4d4930fda256f411e55b",    "path/js/filename1.js" : "08e0484db917d5c6d9a64863d38d8524",    "path/js/filename2.js" : "acf18f30162b04df1a35ba5cc51fff1a"}

php4k9HTML5中文学习网 - HTML5先行者学习网

<?php/** * GENERATED FILE, DO NOT EDIT. This file is simply a collection of generated hashes for static assets in * the project. It is generated by grunt, see Gruntfile.js for details. */return array(    'md5' => array(        'js/main.js' => 'ae65552d65cd19ab4f1996c77915ed42',        'js/vendor/modernizr-2.6.2.min.js' => 'b8009fa783ea3de3802efcd29d7473d5',        'img/bg/about.jpg' => '7e402c1d64f0b00b4ade850f9017556a',        'crossdomain.xml' => '625e6c239ea0b5504ce0641b74ec2a3b',    ));

当然,你也可以自己定义输出容的格式,具体使用方法见官方文档。4k9HTML5中文学习网 - HTML5先行者学习网

另外,还有其它类似的插件:4k9HTML5中文学习网 - HTML5先行者学习网

你可以根据你的需求选择你合适的插件,更多的插件可以从gruntjs官方的插库找到。4k9HTML5中文学习网 - HTML5先行者学习网

如果你有更好的方法,欢迎分享。4k9HTML5中文学习网 - HTML5先行者学习网

扩展阅读

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助