Работа со статикой в Django

Проблемы

• количество файлов статики на странице

• размеры файлов

• Less, Stylus => CSS

• Co3eeScript, ClojureScript => JavaScript

• компиляция шаблонов на клиенте

К чему они приводят

• появляется огромный script.js (style.css), в котором много тысяч строк

• комментариев нет

• код плохо читается

• табуляция вместо пробелов (экономия байтов же!)

• Less, Co3eeScript и т.п. не используются

Что нужно от инструмента

• объединение файлов статики в один

• минификация и gzip-сжатие кода

• поддержка Less, Stylus, Co3eeScript и т.д.

• прозрачная и незаметная работа

• удобная отладка

Что уже есть

• django_compressor

• webassets

• другие библиотеки, похожие на webassets

• django-gears (порт Sprockets)

django_compressor

{% load compress %}{% compress js %} <script src="/static/js/models.js"></script> <script src="/static/js/collections.js"></script> <script src="/static/js/views.js"></script> <script src="/static/js/router.js"></script> <script src="/static/js/application.js"></script>{% endcompress %}

<!-- на выходе будет нечто подобное: -->

<script src="/static/CACHE/js/34fe95a4b234.js"></ script>

webassetsregister('application', Bundle( 'js/models.js', 'js/collections.js', 'js/views.js', 'js/router.js', 'js/application.js', output='js/gen/application.js',))

# в шаблоне:

{% load assets %}{% assets "application" %} <script src="{{ ASSET_URL }}"></script>{% endassets %}

django-gears/* * application.js * * =require models * =require collections * =require_directory templates * =require views * =require router */

$(function() { new Router(); Backbone.history.start({pushState: true});});

django-gears

<script src="{{ STATIC_URL }}js/application.js"></script>

django-gears: отладка

{% load gears %}{% js_asset_tag "js/application.js" %}

django-gears: отладка

<!-- DEBUG = True -->

<script src="/static/js/models.js?body=1"></script><script src="/static/js/collections.js?body=1"></script><script src="/static/js/views.js?body=1"></script><script src="/static/js/router.js?body=1"></script><script src="/static/js/application.js?body=1"></script>

<!-- DEBUG = False -->

<script src="/static/js/application.js"></script>

django-gears

• http://git.io/gears

• обертка над библиотекой Gears

• еще есть Flask-Gears и gears-cli

Зависимости

• require

• require_self

• require_directory

• require_tree (скоро)

• depend_on (скоро)

Компиляция в CSS и JS

• Из коробки поддерживаются:

• Less• Stylus• Co3eeScript• Handlebars

• Цепочка расширений определяет процедуру компиляции:

• application.js.co3ee• style.css.styl

Минификация

• slimit (Python)

• cssmin (Python)

• UglifyJS (node.js)

• clean-css (node.js)

Использование

python manage.py runserver

Использование

python manage.py collectassetspython manage.py collectstatic

Спасибо за вниманиеВопросы?

• @yumatov

• http://trilandev.com

• https://github.com/yumike

• https://github.com/trilan