结合css和js文件+ css图像

时间:2010-08-13 20:40:10

标签: php javascript css .htaccess

我正在玩这个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脚本。

datepicker的图片有这样的请求网址

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 / )

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

2 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:0)

您只需在路径中将/替换为其他内容(我在下面的示例中使用:),然后将其翻译回服务器上。

例如,而不是

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