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

来源：互联网发布：登录无限极网络编辑：程序博客网时间：2024/06/05 09:42

web开发时经常遇到这种情况：开发人员修改了静态资源，浏览器缓存过该静态资源，用户再次访问时，js css修改了，用户客户端乱了。其实只要清一下缓存就好了，但是我们不能要求用户去清缓存。那么就需要开发人员给静态资源加版本号，来判断该静态资源是否被修改过。

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

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

<?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="assets/css/style.css?v=1367936144322" type="text/css" />

二.使用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',    ));

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

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

github.com/ktmud/grunt-hashmap
npmjs.org/package/grunt-hash
npmjs.org/package/grunt-assets-versioning

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

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

扩展阅读

derek.io/blog/2009/auto-versioning-javascript-and-css-files/
www.prestashop.com/forums/topic/136126-auto-versioning-css-files-force-css-refresh/

阅读全文

0 0