grunt 给静态资源文件css,js加上版本号后，html如何引用不同版本号的css,js

Question

例如 ：执行grunt命令后，加上版本号的js文件名为lib.v201712241621.js；
每次执行完grunt命令后，版本号后面带的数字都不一样，所以在html文件中该如何引用

Answer 1

你的HTML是静态的还是动态的（比如PHP/Java里面渲染的）？

如果是静态的：那很好办，直接在grunt任务里面把对应的html文件里引用的js文件名替换成带版本号的，然后输出到输出目录就可以了。

如果是动态的（比如PHP/Java里面渲染的）：可以这样：

1. grunt 构建的时候，记录下 原始文件名 <-> 带版本的文件名 这种关系，比如用个object做记录，然后生成个manifest.json文件
2. 在 PHP/Java 的项目里面，渲染html前读取下这个manifest.json文件，在渲染html的时候给js文件名加上版本号即可。

这是我之前写过的示例代码：(虽然使用的是gulp，不过grunt做的话也是类似的过程）

1. gulp构建的时候记录 原始文件名 <-> 带版本的文件名 这种关系:

https://github.com/Clarence-p...

生成个manifest.json文件:

https://github.com/Clarence-p...

1. 在 PHP 的项目里面，渲染html前读取下这个manifest.json文件

https://github.com/Clarence-p...

在渲染html的时候给js文件名加上版本号即可:

https://github.com/Clarence-p...

https://github.com/Clarence-p...