combining css and js files + css images

Question

I'm playing with this combine.php file and it looks nice, but I'm wondering if there is a work around for my problem.

I now have fewer script and link tags for my resources that look and work like they're supposed to

<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"&gt;&lt;/script&gt;
<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" >

however, images that are included in a stylesheet with a relative path sometimes do not appear - it depends on the order in which the stylesheets are included ie:

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

The specific culprit on hand that I'm working with has to deal w/ a jqueryui datepicker script and a cluetip script.

Images for the datepicker have request urls like this one

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

where the image thinks the path is from the last included script (libjs/plugins/cluetip/1.0.6/), whereas its actually from an earlier script (libjs/jqueryui/1.8/development-bundle/themes/base/)

I do not want to change any of my external resources to absolute paths. Is there a workaround for this problem? is there a better way of handling this situation?

Answer 1

You could simply substitute / for something else (I use : in the example below) in the paths, and translate it back on the server.

For example, instead of

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

it would look like

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

It will keep the paths constant regardless of the inclusion order, though you'll still have to change paths in the files (or move the files themselves), because every path will be relative to http://path/to/server/css/. But at least they won't have to be absolute.

Answer 2

OK, here's what I did. Since the combine.php file creates a compressed cache file with a unique name for the Etag header I figured I could dynamically update the image paths to an absolute path when the cache file is created. so I slightly modified the script to rewrite the relative paths into absolute paths - which allows my to keep any new/updated plugins untouched and gets me the end result I needed.

my rewrite took the portion of the combine.php file like this:

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

into this: (NB. $glmBaseUrl is a dynamically created url for the server this scripts are on)

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";
}