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

2019-09-09 郑州网站建设  

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

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

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

以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=http://www.divcss5.com/html5/"<?=AutoVersion('assets/css/style.css')?>" type="text/css" />

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

<link rel="stylesheet" href=http://www.divcss5.com/html5/"assets/css/style.css?v=1367936144322" type="text/css" />

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

二、使用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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1524.html转载请标明出处,谢谢合作!
标签:
  • 前端
  • 开发
  • 遇到
  • 不可避免