Build automation statics

Transcript

1. Сборка статики
2. Препроцессоры
3. Препроцессоры решают одни
 и создают новые проблемы
4. Раньше было так — Редактируем код — Запускаем тесты
5. А стало так — Редактируем код — Компилируем его в CSS/JS — Запускаем тесты
6. Варианты — Ручная компиляция — При сохранении файла — При обновлении страницы
7. Отладка
8. Положение ошибки в сообщении косоли браузера не соответствует тому, где она находится в исходном коде
9. Source maps (карты кода) позволяют указать соответствия между исходным и скомпилированным кодом
10. Объединение файлов
11. Хочется разбить скрипты приложения
 на модули
12. Пример из проекта — CoffeeScript, Handlebars — 80 тысяч строк кода — 1,3 тысячи файлов
13. Версионирование
14. Нет гарантий, что после обновления статики
 на сервере, она обновится в браузере клиента
15. Версия в URL ресурса — http://example.com/static/css/style.css?v=1.1 — http://example.com/static/css/style.a6ebc32.css
16. Содержимое ресурса, доступного по URL’у, гарантированно не меняется
17. Кэшируем навсегда location /static/ { expires 1y; add_header Cache-Control public; add_header ETag ""; alias /var/www/project/static/; }
18. Минификация и сжатие
19. Пример из проекта Без минификации и сжатия 4 Мб С минификацией 2,4 Мб Со сжатием 450 Кб С минификацией и сжатием 330 Кб
20. Сжимаем заранее location /static/ {
 gzip_static on; expires 1y; add_header Cache-Control public; add_header ETag ""; alias /var/www/project/static/; }
21. Системы сборки статики — Grunt (http://gruntjs.com) — Gulp (http://gulpjs.com) — Sprockets (https://github.com/.../sprockets) — Gears (https://github.com/gears) (На самом деле их много)
22. Вопросы? — yumatov@trilan.ru — http://github.com/yumike — http://twitter.com/yumatov