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

O_o华丽丽
  • 130

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

回复
阅读 3.3k
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构建的时候记录 原始文件名 <-> 带版本的文件名 这种关系:

clipboard.png

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

生成个manifest.json文件:

clipboard.png

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

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

clipboard.png

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

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

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

clipboard.png

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏