- 前端开发过程中难免要处理js与css的缓存问题,一般需要为引用的js和css静态文件加入版本号,让浏览器可以知道文件是否有变更。
- 我们做法是为js/css静态文件产生一个MD5值,作为其对应的版本号,一旦文件有修改,那么对应的版本号也会变化。
- 显然这是一个重复性很高(因为js/css经常修改)的工作,所以我们可以用fileVersion来帮助我们自动完成这部分工作。
- 另外,在上线之前将HTML中引用的JS/CSS/IMG路径替换为静态服务器路径,也是一项需要自动构建来完成的工作。
add file version to js&css in the html
为html中引用的js/css添加md5版本号
replace the js/css path with static server URL
使用静态服务器URL路径替换JS/CSS引用路径
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-file-version --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-file-version');
In your project's Gruntfile, add a section named file_version to the data object passed into grunt.initConfig().
grunt.initConfig({ file_version: { js: { options: { }, files: { 'demo/index.html': ['demo/js/*.js'], }, }, css: { options: { }, files: { 'demo/index.html': ['demo/css/*.css'], }, }, }, });
暂时无需配置,插件采用以下默认配置
- 版本号参数名称:
v- 版本号长度:
8
在本例中,我们将会为index.html中引用的js与css添加版本号
在配置js和css路径时,只需配置到目录即可
grunt.initConfig({ file_version: { js: { options: { }, files: { 'demo/index.html': ['demo/js/*.js'], }, }, css: { options: { }, files: { 'demo/index.html': ['demo/css/*.css'], }, }, }, });
<link rel="stylesheet" href="css/hello.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/world.css"/> <script src="js/hello.js" type="text/javascript" charset="utf-8"></script> <script src="js/world.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/hello.css?v=e1bcdd3a" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/world.css?v=6ec18d77"/> <script src="js/hello.js?v=10f59858" type="text/javascript" charset="utf-8"></script> <script src="js/world.js?v=0120e944" type="text/javascript" charset="utf-8"></script>
In your project's Gruntfile, add a section named file_version to the data object passed into grunt.initConfig().
使用静态服务器URL路径替换JS/CSS引用路径
grunt.initConfig({ file_version: { js: { options: { cdnhost:'http://static.youcdnhost.com/' }, files: { 'demo/index.html': ['demo/js/*.js'], }, }, css: { options: { }, files: { 'demo/index.html': ['demo/css/*.css'], }, }, }, });
- 静态服务器URL:
cdnhost需要完整的URL路径,如http://static.youcdnhost.com/
如果需要使用静态服务器URL替换,那么最后生成规则如下:
- 静态服务器URL + JS/CSS配置路径 + MD5版本号 所谓配置路径,就是在gruntfile中配置的路径,例如本例中的
demo/js/*.js
如果您只需要使用MD5版本号的话,插件则不会修改html中js/css原引用路径,只会在末尾添加上版本号- html中原引用路径 + MD5版本号 比如您在HTML中的引用路径为
../framework/jquery/1.4.2/jquery.min.js
在本例中,我们将会为index.html中引用的js同时添加版本号和静态服务器URL
css只添加MD5版本号
在配置js和css路径时,只需配置到目录即可
grunt.initConfig({ file_version: { js: { options: { cdnhost:'http://static.youcdnhost.com/' }, files: { 'demo/index.html': ['demo/js/*.js'], }, }, css: { options: { }, files: { 'demo/index.html': ['demo/css/*.css'], }, }, }, });
<link rel="stylesheet" href="css/hello.css?v=e1bcdd3a" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/world.css?v=6ec18d77"/> <script src="js/hello.js?v=10f59858" type="text/javascript" charset="utf-8"></script> <script src="js/world.js?v=0120e944" type="text/javascript" charset="utf-8"></script> <script src="js/app/app.js?v=c1443dbd" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/hello.css?v=b963d6e4" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/world.css?v=6ec18d77"/> <script src="http://static.youcdnhost.com/demo/js/hello.js?v=10f59858" type="text/javascript" charset="utf-8"></script> <script src="http://static.youcdnhost.com/demo/js/world.js?v=0120e944" type="text/javascript" charset="utf-8"></script> <script src="http://static.youcdnhost.com/demo/js/app/app.js?v=c1443dbd" type="text/javascript" charset="utf-8"></script>
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
感谢韩小麦同学,我最初是使用你的asset-cache-control插件
部分代码也是借鉴你的插件
0.2.0 2015年8月4日 新功能:使用静态服务器URL替换JS/CSS路径
0.1.0 2015年7月30日 发布fileVersion插件