Question

寻找一个尊重相对URL引用的构建时CSS组合器/缩小器。

也就是说，如果我合并的其中一个文件位于

/path/to/style.css

并包含

background-image: url(images/my-image.png)

生成的文件应包含

background-image: url(/path/to/images/my-image.png).

应该使用跨平台的Mac和PC，因此通过Mono或Node的.NET似乎是明显的选择。

Answer 1

查看WebAssets / Github

Python Web开发的资产管理应用程序 - 使用它合并并压缩您的JavaScript和CSS文件。

它包括cssmin，cssutils，yui_css，less，sass，clevercss，compass，scss，coffeescript，gzip等的过滤器/预编译器。

特定于您的问题：

cssrewrite 重写CSS文件中相对网址的源过滤器。

CSS允许您指定相对于CSS位置的URL   文件。但是，您可能希望将压缩资产存储在   与源文件不同的地方，或合并源文件   不同的地点。这将打破这些相对的CSS   引用，因为基本URL已更改。

此过滤器透明地重写了CSS中的CSS url（）指令   源文件使它们相对于输出路径的位置。   它用作源过滤器，即它分别应用于每个过滤器   源文件合并之前。

无需配置。

过滤器还支持手动模式：

get_filter('cssrewrite', replace={'old_directory', '/custom/path/'})

这将重写所有指向old_directory中文件的url，以使用/ custom / path作为前缀。

一般用法：

from webassets import Environment
my_env = Environment('../static/media', '/media')

""""As you can see, the environment requires two arguments,
the path in which your media files are located, as well as     
the url prefix under which the media directory is available. 
This prefix will be used when generating output urls.  Next, 
you need to define your assets, in the form of so called 
bundles, and register them with the environment. The easiest     
way to do it is directly in code:""""

from webassets import Bundle
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js', filters='jsmin', output='gen/packed.js')
my_env.register('js_all', js)

在这种情况下，您将使用src替换您的js output。这是另一种表示法：

directory: ../static
url: /media
debug: True
updater: timestamp

bundles:
    bundle-name:
        filters: sass,cssutils
        output: cache/default.css
        contents:
            - css/jquery.ui.calendar.css
            - css/jquery.ui.slider.css

还有Django，Flask，Jinja2，Werkzeug的特殊挂钩..

Documentation is here.希望这有帮助！

Answer 2

这是一个基本的Python脚本，它将目录中的所有CSS文件组合在一起并替换对images文件夹的引用：

import os
import fnmatch

output_text = ''

for filename in os.listdir('.'):

    if fnmatch.fnmatch(filename, '*.css'):
        output_text += open(filename, 'r').read()

output_text = output_text.replace('url(images', 'url(/path/to/images'))

f = open('combined.css', 'w')
f.write(output_text)
f.close()

这是我的头脑，尚未经过测试，因此可能包含错误。

回复您的评论：

或者，您可以使用服务器端CSS，例如SASS/Compass或LESS。

使用SASS / Compass，您可以使用config.rb文件或命令行动态更改资产（图像）的路径。您可以以相同的方式轻松切换相对路径和绝对路径。您的样式表会自动压缩。要确保合并文件，您只需创建master.scss文件并@import每个文件。我的大多数经验都与SASS有关，但我相信LESS有类似的功能。

但是，这可能并不理想。在Python / Ruby脚本中处理它会更简单，可移植，更高效。扩展上面的Python脚本以使其压缩输出文件并匹配所有相对路径不会花费太多精力。然后，您可以通过让Foreman查看构建目录以进行更改来自动运行它。

构建时CSS组合器，尊重相对URL引用？

2 个答案: