php - 结合 css 和 js 文件 + css 图片

Question

我正在玩这个 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/)

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

Answer 1

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

我重写了 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";
}