Gulp+Flask 静态文件版本管理最佳实践

最近了解了前端静态文件版本的管理方案，结合目前自己正在做的 Python Web 项目 EveryClass 总结了一套最佳前端静态文件版本方案。

公认的静态文件命名方案为main_c0f13f3.css，其中c0f13f3为文件 hash。有关于为什么不使用main.css?v=xxx的形式，请参考这篇知乎回答。我在此基础上进行了一个小优化，修改成了main_v1_c0f13f3.css，主要是考虑到了前端界面可能会有大版本更新的问题，如果只使用hash值非常不便于直观地提示文件版本。这样做的另外一个好处是：如果静态文件版本已经更新到了v20，完全可以把v1删掉，用v1做前缀可以在 CDN 上快速找到并删掉所有v1版本的文件。

需要注意的是，静态文件服务器需要配置让静态文件缓存永不过期。如果只是304协商缓存的话就达不到比较好的优化速度的效果了。

在我的这个项目中，前端自动化使用的是 Gulp、后端 python web 框架使用的是 Flask。如何结合这两者呢？我的解决方案如下：

首先上一个文件目录：

/src/*.py
/src/templates
/src/static/*.js
/src/static/*.css
/dist/static/*.js
/dist/static/*.css

其中 /src 是源文件目录，CSS文件名命名规范为：style-v1.css（名称-v1.css）；/dist是 Gulp 的输出目录（发布到静态服务器）。Gulp 进行的动作主要是uglify、versioning。至于模板文件，我觉得交给 Flask 管理比较好。