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

Transcript

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