объединение CSS и JS файлов + CSS изображений

Question

Я играю с этим файлом комбин. Php , и он выглядит красиво, но мне интересно, есть ли способ обойти мою проблему.

Теперь у меня меньше скриптов и тегов ссылок для моих ресурсов, которые выглядят и работают так, как они должны

<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

ОК, вот что я сделал.Так как файл comb.php создает сжатый файл кэша с уникальным именем для заголовка Etag, я подумал, что при создании файла кэша я могу динамически обновить пути к изображениям до абсолютного пути.поэтому я немного изменил скрипт, чтобы переписать относительные пути в абсолютные, что позволяет мне не трогать новые / обновленные плагины и дает мне конечный результат, который мне нужен.

мое переписывание заняло часть объединения.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/.Но по крайней мере они не должны быть абсолютными.