结合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 /插件/ cluetip/1.0.6 /），而它实际上是从更早的脚本（libjs/jqueryui/1.8/development-bundle/themes/base /）

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

Answer 1

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

我重写了该combine.php文件这样的部分：

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

到这个（NB $ 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"; 
} 

Answer 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/。但至少他们不一定是绝对的。