Ранее я писал об использовании django-compressor (1, 2, 3) для объединения и обработки (чистки, сжатия) css и js файлов. Вкратце, compressor мне не понравился. На днях появился форк compressor'а – django-css, но как в анекдоте про пропавшее серебро: “ложку мы потом нашли, но неприятный осадок остался”.
Сегодня будем смотреть на Django-compress, который появился значительно раньше compressor’а, но к сожалению (или к счастью) не менялся с 16.03.2009.
Что умеет compress?
- объединять js/css файлы,
- минифицифировать css файлы (вот так, да. На самом деле всего лишь удалять пробелы, переносы, табы и пр. мусор),
- автоматически или вручную обновлять файлы (ура!),
- продвинутый конфиг для объединения в группы, сжатия и пр. опиции,
- включенный фильтр для YUI compressor, CSSTidy,
- инфраструктуру для создания собственных фильтров,
- спец. template тэги для простой загрузки получившегося безобразия.
Установка и настройка
Делаем чекаут svn co http://django-compress.googlecode.com/svn/trunk/ django-compress или клонируем git’ом с адреса git://github.com/pelme/django-compress.git. Заходим в каталог, выполняем python setup.py install.
Мне бы хотелось рассказать тебе, дорогой читатель как работает compress, но я и сам не понимаю. Прелесть compress’а в том, что прям из коробки он умеет все, что нужно.
Для начала в settings.py нужно указать что и как мы будем собирать, сжимать и пр.
COMPRESS_CSS = {
'common': {
'source_filenames': (
'css/ui-lightness/jquery-ui-1.7.1.custom.css',
'js/jquery.fancybox/jquery.fancybox.css',
'common/style.css'),
'output_filename': 'css/common.css',
'extra_context': {
'media': 'screen,projection',
},
},
'rikone': {
'source_filenames': (
'rikone.ru/css/style.css',),
'output_filename': 'rikone.ru/css/rikone.css',
'extra_context': {
'media': 'screen,projection',
},
},
'72arenda': {
'source_filenames': (
'72arenda.ru/css/template_css.css',),
'output_filename': '72arenda.ru/css/72arenda.css',
'extra_context': {
'media': 'screen,projection',
},
},
'realtor-tyumen': {
'source_filenames': (
'realtor-tyumen.ru/css/lg-stl.css',),
'output_filename': 'realtor-tyumen.ru/css/realtor-tyumen.css',
'extra_context': {
'media': 'screen,projection',
},
},
}
COMPRESS_JS = {
'common': {
'source_filenames': (
'js/jquery-1.3.2.min.js',
'js/jquery-ui-1.7.custom.min.js',
'js/ui.datepicker-ru.js',
'js/jquery.fancybox/jquery.easing.1.3.js',
'js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js'),
'output_filename': 'js/common.js',
}
}
COMPRESS = True
COMPRESS_AUTO = COMPRESS_VERSION = False
COMPRESS_CSS_FILTERS = None
Если уже потрудились добавить csstidy куда-нибудь в видное из проекта место, то можно смело убирать последнюю строку. По умолчанию включенная опция COMPRESS будет жать файлы при помощи JSmin (встроен) и csstidy (последняя строка как раз его отключала). Эта пара (JSmin и csstidy) дает неплохие результаты.
Я тестировал на наборе из трех css файлов (забиты были всякой ерундой из бесплатных шаблонов) и трех js (скопированная debug версия последней jquery). Результат: было 400 кб, стало 312 кб.
Но прелесть подобных инструментов в возможности использовать более мощные инструменты сжатия. Yuicompressor, например, на таком же исходном наборе давал 218 кб. Ощутимо?
Подключить yuicompressor можно так:
COMPRESS_YUI_BINARY = 'java -jar yuicompressor-2.4.2.jar'
COMPRESS_CSS_FILTERS = COMPRESS_JS_FILTERS = ("compress.filters.yui.YUICompressorFilter",)
Jar файл в данном случае у меня лежал в каталоге с проектом, но думаю ни у кого не возникнет проблем с прописыванием полного пути.
synccompress –force
Главная прелесть django-compress в том, что он умеет определять изменился ли файл. Собственно, можно даже использовать номера ревизий в названии комбинированных и сжатых файлов, чтоб уж точно не возникло проблем с кешем.
COMPRESS_VERSION = True
COMPRESS_JS = {
'common': {
'source_filenames': (
'js/jquery-1.3.2.min.js',
'js/jquery-ui-1.7.custom.min.js',
'js/ui.datepicker-ru.js',
'js/jquery.fancybox/jquery.easing.1.3.js',
'js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js'),
'output_filename': 'js/common.r?.js',
}
}
На место “?” встанет номер версии файла. Изменчивость названии – не проблема. Для вызова групп в шаблонах используется специальный templatetag:
{% load compressed %}
{% compressed_css 'common' %}
{% compressed_js 'common' %}
В примере, кстати, заметна ещё одна “приятность”, имена групп для js и css файлов могут совпадать.
Теперь вернемся к заголовку “synccompress –force”. О чем это? Если отключить COMPRESS_AUTO, то файлы перестраиваться не будут, но их можно перестраивать спец. managment командой – synccompres, она смотрит изменились ли файлы набора и перестраивает результирующий файл (если необходимо). Но можно команду “заставить” перестраивать опцией “—force” (вонючий livewriter норовит сожрать двойное “-“). Команду можно дергать по cron или не лениться вызывать руками при обновлении css и/или js.