Html 是否有方法使用相对路径导出带有CSS/images/etc的页面?

Html 是否有方法使用相对路径导出带有CSS/images/etc的页面?,html,css,relative-path,Html,Css,Relative Path,我在一个非常大的企业web应用程序上工作——我创建了一个非常简单的原型HTML页面——它只是一个CSS和JS列表,包含很少的标记。然而,它总共包含57个CSS包含和271个javascript包含(右疯狂??) 在生产中,这些CSS/JS文件将以各种方式缩小和组合,但出于开发目的,我不打算费心 HTML由一个简单的ApacheHTTP服务器提供,我用一个URL如下:http://localhost/demo.html我和其他人共享此链接,但您必须在防火墙后面才能访问它 我想把这一个HTML文件和

我在一个非常大的企业web应用程序上工作——我创建了一个非常简单的原型HTML页面——它只是一个CSS和JS列表,包含很少的标记。然而,它总共包含57个CSS包含和271个javascript包含(右疯狂??)

在生产中,这些CSS/JS文件将以各种方式缩小和组合,但出于开发目的,我不打算费心

HTML由一个简单的ApacheHTTP服务器提供,我用一个URL如下:
http://localhost/demo.html
我和其他人共享此链接,但您必须在防火墙后面才能访问它

我想把这一个HTML文件和所有引用的JS和CSS文件打包成一个ZIP文件,并与其他人共享,这样就只需要解压并直接打开HTML文件

我有两个问题:

  • CSS文件引用的图像使用的url类似于
    url(/path/to/image.png)
    ,它们不是相对的,因此如果您解压缩并查看HTML,这些链接将被破坏
  • 实际上,还有数千个其他JS/CSS文件/图像也在这些文件夹中,而演示程序并不使用这些文件夹,因此只需压缩整个文件夹,就会产生一个非常臃肿的zip文件
反正-

我定期创建这些类型的演示,是否有一些简单的方法来创建一个ZIP,它将:

  • 更新了使用相对URL的CSS文件
  • 仅包括此html引用的JS/CSS,以及特定CSS文件引用的图像
  • 如果我不用一大堆手工工作就能做到这一点,如果它能以某种方式自动完成,那就太棒了

    例如,一个CSS文件可能具有以下路径和文件名

    /ui/demoapp/css/theme.css

    在这个CSS文件中,您会发现许多像这样的图像引用:

    url(/ui/common/img/background.png)

    我认为,要使其工作,相对图像路径应如下所示:


    url(../../common/img/background.png)

    我将回答我自己的问题,因为我已经出于自己的目的解决了这个问题。我发现有两个选项很有用:

  • 现代浏览器在文件菜单下有一个“另存页面为…”选项,或者在Chrome中的一个菜单上有一个选项。但是,当页面由javascript生成时,这并不总是正常工作

  • 我创建了自己的自定义应用程序,可以解析出所有CSS/Javascript资源,并将CSS引用转换为相对URL;然而,这对其他人来说并不是一个好答案


  • 如果其他人知道一个常用的实用程序或类似的东西,它比使用内置的浏览器“另存页面为…”选项更好-请随意发布另一个答案。

    我将回答我自己的问题,因为我已经出于我自己的目的解决了这个问题。我发现有两个选项很有用:

  • 现代浏览器在文件菜单下有一个“另存页面为…”选项,或者在Chrome中的一个菜单上有一个选项。但是,当页面由javascript生成时,这并不总是正常工作

  • 我创建了自己的自定义应用程序,可以解析出所有CSS/Javascript资源,并将CSS引用转换为相对URL;然而,这对其他人来说并不是一个好答案


  • 如果其他任何人知道一个常用的实用程序或类似的东西,它比使用内置的浏览器“另存为…”选项更好-请随意发布另一个答案。

    在文本编辑器中,尝试将“/ui/”替换为“../../”?@Torr3nt这就是我现在所做的,这涉及到大量的手动查找和替换-可能存在不同级别的嵌套,并对所有CSS文件执行简单的替换
    /ui/
    。/../在所有情况下都不起作用。在编辑器中执行简单的搜索和替换会比这样做花费更少的时间和精力。这个问题几乎不属于SO(re:您需要一个专门的应用程序来完成您的要求)。可以完成您要求的部分工作,但需要大量手动配置/转换。@cimmanon您可能对手动工作量的估计是正确的(即通过57个CSS文件执行查找和替换,并手动将文件复制到zip文件)-但是,正如我指出的,这是我经常做的事情,所以我正在寻找一种自动化的方法。它不一定需要是“专用应用程序”,因为这是一个一般性问题,不依赖于HTML文件内容的细节。在文本编辑器中,尝试将“/ui/”替换为“../../”?@Torr3nt这就是我现在所做的,这涉及到大量的手动查找和替换-可能存在不同级别的嵌套,并对所有CSS文件执行简单的替换
    /ui/
    。/../在所有情况下都不起作用。在编辑器中执行简单的搜索和替换会比这样做花费更少的时间和精力。这个问题几乎不属于SO(re:您需要一个专门的应用程序来完成您的要求)。可以完成您要求的部分工作,但需要大量手动配置/转换。@cimmanon您可能对手动工作量的估计是正确的(即通过57个CSS文件执行查找和替换,并手动将文件复制到zip文件)-但是,正如我指出的,这是我经常做的事情,所以我正在寻找一种自动化的方法。它不一定需要是一个“专门的应用程序”,因为这是一个普遍的问题,不依赖于HTML文件内容的细节。