Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

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

•
•
1 of 18
Download to read offline

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

More Related Content

Работа со статикой в 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)
  • 18. Спасибо за внимание Вопросы? • @yumatov • http://trilandev.com • https://github.com/yumike • https://github.com/trilan