Background

• 前端开发过程中难免要处理js与css的缓存问题，一般需要为引用的js和css静态文件加入版本号，让浏览器可以知道文件是否有变更。
  
• 我们做法是为js/css静态文件产生一个MD5值，作为其对应的版本号，一旦文件有修改，那么对应的版本号也会变化。
  
• 显然这是一个重复性很高（因为js/css经常修改）的工作，所以我们可以用fileVersion来帮助我们自动完成这部分工作。
  
• 另外，在上线之前将HTML中引用的JS/CSS/IMG路径替换为静态服务器路径，也是一项需要自动构建来完成的工作。
  

grunt-file-version

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引用路径

Getting Started

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

添加MD5版本号

Overview

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

Options

暂时无需配置，插件采用以下默认配置

• 版本号参数名称：v
  
• 版本号长度：8
  

Usage Examples

Default Options

在本例中，我们将会为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'],
	    },
	  },
  },
});

Example Result

原始文件内容

	<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>

使用静态服务器URL路径

Overview

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

Options

• 静态服务器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

Usage Examples

Default Options

在本例中，我们将会为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'],
	    },
	  },
  },
});

Example Result

原始文件内容

	<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>

Contributing

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.

Thanks

感谢韩小麦同学，我最初是使用你的asset-cache-control插件
部分代码也是借鉴你的插件

Release History

0.2.0    2015-8-4   新功能：使用静态服务器URL替换JS/CSS路径
0.1.0    2015-7-30   发布fileVersion插件