Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Mike Yumatov

May 29, 2012
Tweet

More Decks by Mike Yumatov

Other Decks in Programming

Transcript

  1. Проблемы • количество файлов статики на странице • размеры файлов

    • Less, Stylus => CSS • Co3eeScript, ClojureScript => JavaScript • компиляция шаблонов на клиенте
  2. К чему они приводят • появляется огромный script.js (style.css), в

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

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

    похожие на webassets • django-gears (порт Sprockets)
  5. 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>
  6. 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 %}
  7. django-gears /* * application.js * * =require models * =require

    collections * =require_directory templates * =require views * =require router */ $(function() { new Router(); Backbone.history.start({pushState: true}); });
  8. 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>
  9. Компиляция в CSS и JS • Из коробки поддерживаются: •

    Less • Stylus • Co3eeScript • Handlebars • Цепочка расширений определяет процедуру компиляции: • application.js.co3ee • style.css.styl