結合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/。但至少他們不一定是絕對的。