javascript - 如何自己实现一个前端资源的自动化更新工具呢？

Question

想要自己实现一个静态资源更新后，自动计算md5值重命名，发布到静态资源服务器，并且改写html中的相关标签的脚本。自己大概设想了一下，现在有这么几个问题。

1. 静态文件服务器和动态的服务器可能有很多台，而且不在一个机房，那么这个工具，肯定要做一个通知系统，把更改过的js
   css啊发布到静态服务器，把改写过标签的html文件发布到动态服务器里，这一步是要基于网络协议了，让静态服务器监听一个端口等待通知的到来和文件的传输，可靠吗？

2. 这个脚本改写html中资源加载的标签时，可能会出现这种情况，html中加载了1.css,1.css又加载了一个jpg。这个时候jpg变动的话，会引起所有1.css和html都变动。所以肯定要从最底层开始计算md5并替换标签。这个层级关系的处理上有什么好的方法吗？

3. 这个问题不是关于这个脚本的。。只是想问一下像browserSync这样的工具，可以实现资源ctrl
   s保存后自动刷新页面，这个对资源的监控(gulp里面是watching
   file吧)是怎么做到的？就是写一个timer无限循环计算文件的md5吗？

希望有做过的前辈来解答下~感激不尽~

Answer 1

不知道你们的运维和测试同意不同意，也不知道你们的代码的版本管理工具是啥。

以前公司比较小，我以git为基础写了个这万一，提交代码自动，自动服务端打包更新的。

以git为例，git有个webhook，你可以设置它在每次代码提交后给指定一个或多个地址发送一个http请求，一般是post。

然后在服务端，起一个服务，来接收这个请求，然后拉取仓库代码，然后从提交代码的commits信息里匹配相关指令（因为不是每次提交都需要打包，所以我还指定了打包的指令），匹配到了后，就开始检查package是否变动了，便动了就先装包依赖。然后就执行打包命令。

这就是基本思路。

然后就是你说的版本号这些，我用的webpack来打包的，配置一下插件就好了，不需要自己写，我用的是HtmlWebpackPlugin。

然后webpack是用来打包和调试的，不是用来部署的！建议换更转移的服务器程序，比如nginx，或者专门用node起一个静态服务器等，或者直接用cdn。

那是给以前公司写的，提供个思路，就不上代码了。