Блог

Ищете объединитель CSS во время сборки, который учитывает относительные ссылки URL.

То есть, если один из файлов, которые я объединяю, находится в

 /path/to/style.css
  

и содержит

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

результирующий файл должен содержать

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

Должен работать на кроссплатформенных Mac и ПК, поэтому либо .NET через Mono, либо Node кажутся очевидными вариантами.

Ознакомьтесь с WebAssets / Github

Приложение для управления активами для веб-разработки на Python — используйте его для объединения и сжатия ваших файлов JavaScript и CSS.

Он включает фильтры / предварительные компиляции для cssmin, cssutils, yui_css, less, sass, clevercss, compass, scss, coffeescript, gzip и т.д.

Конкретно к вашему вопросу:

cssrewrite Фильтр исходного кода, который перезаписывает относительные URL-адреса в файлах CSS.

CSS позволяет указывать URL-адреса относительно расположения файла CSS. Однако вы можете захотеть сохранить свои сжатые ресурсы в другом месте, чем исходные файлы, или объединить исходные файлы из разных мест. Это привело бы к разрыву этих относительных ссылок CSS, поскольку базовый URL изменился.

Этот фильтр прозрачно переписывает инструкции CSS url() в исходных файлах, чтобы сделать их относительно местоположения выходного пути. Он работает как фильтр исходного кода, т. е. применяется индивидуально к каждому исходному файлу перед их объединением.

Настройка не требуется.

Фильтр также поддерживает ручной режим:

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

При этом все URL, указывающие на файлы в old_directory, будут перезаписаны, чтобы вместо них использовать /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)
  

В этом случае вы замените свой js src на 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..

Документация находится здесь. Надеюсь, это поможет!

Вот базовый скрипт на 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 или МЕНЬШЕ.

С помощью SASS / Compass вы можете динамически изменять путь к ресурсам (изображениям), используя config.rb файл или из командной строки. Вы можете легко переключаться между относительными и абсолютными путями таким же образом. Ваши таблицы стилей автоматически сжимаются. Чтобы убедиться, что ваши файлы объединены, вы можете просто создать master.scss файл и @import каждый файл. Большая часть моего опыта связана с SASS, но я считаю, что LESS обладает похожими функциями.

Однако это, вероятно, не идеально. Было бы намного проще, переносимостью и эффективнее позаботиться об этом в скрипте Python / Ruby. Не потребовалось бы много усилий, чтобы расширить приведенный выше скрипт Python, чтобы заставить его сжимать выходной файл и сопоставлять все относительные пути. Затем вы можете заставить его запускаться автоматически, используя что-то вроде Foreman, просматривающий каталог сборки на предмет изменений.