I am currently working on a large enterprise web application and have created a basic prototype HTML page. This page consists of a list of CSS and JS includes with minimal markup. Surprisingly, there are a total of 57 CSS includes and 271 javascript includes in this simple prototype (sounds crazy, right?).
When this project goes into production, the CSS/JS files will be minified and combined in different ways. However, for development purposes, I have left them as is.
The HTML file is being served by a straightforward Apache HTTP server and accessed through a URL like http://localhost/demo.html. Please note that access to this link requires being behind the firewall.
I want to bundle up this single HTML file along with all referenced JS and CSS files into a ZIP archive to easily share it with others. The idea is to allow recipients to simply unzip the file and directly open the HTML file.
I am facing two main challenges:
- The CSS files reference images using non-relative URLs such as
url(/path/to/image.png), which would break when viewing the HTML after unzipping. - There are numerous other JS/CSS files and images in the same folders, even though the demo does not use all of them. Including the entire folder in the zip file would make it unnecessarily large.
As someone who regularly creates these kinds of demos, I am looking for an easy solution to create a ZIP file that:
- Updates the CSS files to use relative URLs instead of absolute ones
- Includes only the JS/CSS files referenced by the HTML, as well as the specific images used in those CSS files
If I could automate this process without manual intervention, it would be amazing!
For example, one of the CSS files has the following path and filename:
/ui/demoapp/css/theme.css
This CSS file contains image references like:
url(/ui/common/img/background.png)To make this work, the relative image path should look something like this:
url(../../common/img/background.png)