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

前端开发中不可避免的会遇到缓存问题，那么如何使给这些静态自动给添加版本号使修改后的内容立即生效呢？下面讲下我找到的两种方法:

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

原理：通过服务器端语言读取文件最后一次修改修改时间，然后将获取的时间作为版本号。

以php为例：

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

        return $file .'v=' .$ver;
    }
?>

使用：

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

如果文件存在，就会生成类似于下面代码：

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

另外，可以考虑将生成的静态html缓存起来，当静态文件通过svn更新时，能过post-commit hooks 执行脚本，更新缓存。

二、使用gruntjs生成版本号

如果你的项目使用了gruntjs自动化构建工具，你可以通过安装gruntjs的插件来生成版本号。

原理：gruntjs插件通过获取文件md5值（同一文件的md5值是固定的），将文件的路径和对应md5值生成json在等格式文件，然后通过后台程序读取并处理json文件，以文件的md5值作为文件版本号。

推荐使用插件：

grunt-cachebuster: npmjs.org/package/grunt-cachebuster

这个插件可以指定生成json或php格式文件：

json

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

php

<?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',
    )
);

当然，你也可以自己定义输出容的格式，具体使用方法见官方文档。

另外，还有其它类似的插件：

你可以根据你的需求选择你合适的插件，更多的插件可以从gruntjs官方的插库找到。

如果你有更好的方法，欢迎分享。

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

二、使用gruntjs生成版本号

扩展阅读