DIV CSS 佈局教程網

前端開發中不可避免的會遇到緩存問題，那麼如何使給這些靜態自動給添加版本號使修改後的內容立即生效呢？下面講下我找到的兩種方法:

一、通過獲取文件最後修改時間

原理：通過服務器端語言讀取文件最後一次修改修改時間，然後將獲取的時間作為版本號。

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

當然，你也可以自己定義輸出容的格式，具體使用方法見官方文檔。

另外，還有其它類似的插件：

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

你可以根據你的需求選擇你合適的插件，更多的插件可以從gruntJS官方的插庫找到。

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