How to implement an automatic update tool for front-end resources?

want to implement a static resource update on your own, automatically calculate the md5 value rename, publish it to the static resource server, and rewrite the script for the related tags in the html. I probably imagined that there are several problems now.

  1. static file server and dynamic server may have many, and not in a computer room, then this tool, must do a notification system, the changed js
    css ah published to the static server, rewrite the tag of the html file published to the dynamic server, this step is based on the network protocol, let the static server listen for a port waiting for the arrival of notifications and file transmission, reliable?

  2. This may happen when
  3. this script overwrites the tag loaded by the resource in html, which loads 1.cssjce1.css and then loads another jpg in html. If the jpg changes at this time, it will cause all 1.css and html to change. So be sure to calculate the md5 from the bottom and replace the tag. Is there any good way to deal with this hierarchical relationship?

  4. this question is not about this script. I just want to ask a tool like browserSync, which can refresh the page automatically after the resource ctrl
    s is saved. How does this resource monitoring (watching
    file in gulp) be done? Is to write a timer infinite loop calculation file md5?

I hope that the seniors who have done it will answer it. Thank you very much.

Mar.03,2022

I don't know if you agree with your operation and testing, and I don't know what the version management tool of your code is.

before the company was relatively small, I wrote one on the basis of git, in case, submit the code automatically, automatically package the update on the server side.

take git as an example. Git has a webhook, that you can set to send a http request, usually post, to a specified address or addresses after each code submission.

then, on the server side, set up a service to receive the request, then pull the warehouse code, and then match the relevant instructions from the commits information of the submitted code (because not every submission needs to be packaged, so I also specify the packing instruction). After matching, we start to check whether the package has changed, and then pack the package dependency first. Then execute the packing command.

this is the basic idea.

then there is the version number you mentioned. I packed it with webpack. Just configure the plug-in. I don't need to write it myself. I use HtmlWebpackPlugin.

then webpack is used for packaging and debugging, not for deployment! It is recommended to switch to more transfer server programs, such as nginx, or use node to set up a static server, etc., or directly use cdn.

that is for the previous company, to provide an idea, not on the code.


1. Submit code based on code management tools such as svn,git.
2. Write a script to generate a md5 file, and the script is uploaded to the server.
3. Submitting code triggers the code management tool hook, which executes the compilation script to generate md5.

Menu