javascript - CDN 部署频繁更改的静态资源有什么工具可以让流程更方便?

Question

出于网速的原因, 我们遇到前端代码通过 CDN 存放, 几乎是全部的代码, CSS, JS, 图片, 都是从 CDN 加载的而不是服务器本身,

问题随之而来了, 我们的 JS, CSS, 图片, 都有一部份是要频繁更改的.

结果就是每次上线发布都需要重命名 JS CSS 甚至一些图片, 形成了比较繁琐的流程. 首先自己也写了一些工具, 自动化 JS 和 CSS 重命名的步骤, 但部分问题并没有解决:

• CSS Spirites 维护的文件需要手动维护, 并且文件名因为 CDN 缓存需要更改
• 服务器需要保存多版本的 JS 和 CSS 文件, Git 仓库内容比较复杂

是否有相关工具可以对 CDN 相关的前端部署做一些优化呢?

Answer 1

我们是这么做的。发一次版本就加一次前端打包版本号，就算只改项目里的一个文字。项目使用的AWS的CDN(cludfront)，没有清除CDN缓存功能

CSS 中用到的图片资源使用相对路径，不使用绝对路径。 我使用 Grunt 来打包，Grunt 中的打包逻辑是这样的：

1. 创建当前日期的文件夹(201308201623，yyyymmddhhMM) 格式
2. 压缩合并js,css，压缩 html
3. 将 html 中的引用地址（css,js）改成预期的 cdn 地址 (cdn.com/201308201623/style.css，cdn.com/201308201623/main.js)

有人提到担心同一个域名，过多连接数会影响加载速度。我的解决办法是，添加两个域名，一个域名负责js，一个域名负责css&images

Answer 2

gruntjs

yeoman

带版本号部署