结合 css 和 js 文件 + css 图像答案

【问题标题】：combining css and js files + css images结合 css 和 js 文件 + css 图像
【发布时间】：2010-08-14 08:37:07
【问题描述】：

我正在使用这个 combine.php file，它看起来不错，但我想知道是否有解决我的问题的方法。

现在我的资源的脚本和链接标签更少了，它们看起来和工作起来都像他们应该的那样

<script type="text/javascript" src="http://path/to/server/javascript/libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.core.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.widget.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.datepicker.min.js,libjs/plugins/cluetip/1.0.6/jquery.cluetip.js,libjs/plugins/cluetip/1.0.6/lib/jquery.hoverIntent.js,libjs/plugins/cluetip/1.0.6/lib/jquery.bgiframe.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/jquery.cluetip.css" >

但是，包含在具有相对路径的样式表中的图像有时不会出现 - 这取决于包含样式表的顺序，即：

background: url(images/ui-bg_flat_75_ffffff_40x100.png)

我正在处理的具体罪魁祸首必须处理 jqueryui datepicker 脚本和 cluetip 脚本。

日期选择器的图像具有像这样的请求 url

http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/images/ui-bg_flat_75_ffffff_40x100.png

图像认为路径来自最后包含的脚本 (libjs/plugins/cluetip/1.0.6/)，而实际上它来自早期脚本 (libjs/jqueryui/1.8/development-bundle/themes/base/ )

我不想将任何外部资源更改为绝对路径。这个问题有解决方法吗？有没有更好的方法来处理这种情况？

【问题讨论】：

标签： php javascript css .htaccess

【解决方案1】：

好的，这就是我所做的。由于 combine.php 文件为 Etag 标头创建了一个具有唯一名称的压缩缓存文件，我想我可以在创建缓存文件时将图像路径动态更新为绝对路径。所以我稍微修改了脚本，将相对路径重写为绝对路径——这样我就可以保持任何新的/更新的插件不受影响，并得到我需要的最终结果。

我的重写采用了 combine.php 文件的一部分，如下所示：

while (list(, $element) = each($elements)) {
    $path = realpath($base . '/' . $element);
    $contents .= "\n\n" . file_get_contents($path)
}

进入这个：（注意。$glmBaseUrl 是为该脚本所在的服务器动态创建的 url）

while (list(, $element) = each($elements)) {
    $path = realpath($base . '/' . $element);

    $fileContents = file_get_contents($path);
    if ($type == 'css') {
        subDir = dirname($element);
        $fileContents = preg_replace(
            '/url\((.+)\)/i',
            'url(' . $glmBaseUrl . $subDir . '/$1)',
            $fileContents
        );
    }
    $contents .= "\n\nfileContents";
}

【讨论】：

【解决方案2】：

您可以简单地将路径中的 / 替换为其他内容（我在下面的示例中使用 :），然后将其翻译回服务器上。

例如，而不是

http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/jquery.cluetip.css

看起来像

http://path/to/server/css/libjs:jqueryui:1.8:development-bundle:themes:base:jquery.ui.core.css,libjs:jqueryui:1.8:development-bundle:themes:base:jquery.ui.theme.css,libjs:jqueryui:1.8:development-bundle:themes:base:jquery.ui.datepicker.css,libjs:plugins:cluetip:1.0.6:jquery.cluetip.css

无论包含顺序如何，它都会使路径保持不变，尽管您仍然必须更改文件中的路径（或移动文件本身），因为每个路径都将相对于 http://path/to/server/css/。但至少它们不必是绝对的。

【讨论】：