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

2.
Проблемы
• количество файлов статики на странице
• размеры файлов
• Less, Stylus => CSS
• Co3eeScript, ClojureScript => JavaScript
• компиляция шаблонов на клиенте

3.
К чему они приводят
• появляется огромный script.js (style.css), в
котором много тысяч строк
• комментариев нет
• код плохо читается
• табуляция вместо пробелов (экономия
байтов же!)
• Less, Co3eeScript и т.п. не используются

4.
Что нужно от
инструмента
• объединение файлов статики в один
• минификация и gzip-сжатие кода
• поддержка Less, Stylus, Co3eeScript и т.д.
• прозрачная и незаметная работа
• удобная отладка

5.
Что уже есть
• django_compressor
• webassets
• другие библиотеки, похожие на webassets
• django-gears (порт Sprockets)

6.
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>

7.
webassets
register('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 %}

8.
django-gears
/*
* application.js
*
* =require models
* =require collections
* =require_directory templates
* =require views
* =require router
*/
$(function() {
new Router();
Backbone.history.start({pushState: true});
});

9.
django-gears
<script src="{{ STATIC_URL }}js/application.js"></script>

10.
django-gears: отладка
{% load gears %}
{% js_asset_tag "js/application.js" %}

11.
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>

12.
django-gears
• http://git.io/gears
• обертка над библиотекой Gears
• еще есть Flask-Gears и gears-cli

13.
Зависимости
• require
• require_self
• require_directory
• require_tree (скоро)
• depend_on (скоро)

14.
Компиляция в CSS и JS
• Из коробки поддерживаются:
• Less
• Stylus
• Co3eeScript
• Handlebars
• Цепочка расширений определяет процедуру
компиляции:
• application.js.co3ee
• style.css.styl

15.
Минификация
• slimit (Python)
• cssmin (Python)
• UglifyJS (node.js)
• clean-css (node.js)

16.
Использование
python manage.py runserver

17.
Использование
python manage.py collectassets
python manage.py collectstatic

18.
Спасибо за внимание
Вопросы?
• @yumatov
• http://trilandev.com
• https://github.com/yumike
• https://github.com/trilan