Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Assets Pipeline

3,042 views

Published on

Published in: Technology

Assets Pipeline

  1. 1. Assets Pipeline,или как я перестал боятся Rails 3.1 иполюбил клиентскую оптимизациюАндрей Ситникai@evilmartians.comevilmartians.com
  2. 2. Языки в ГрупонеCoffeeScript 303 КБ Sass 619 КБ Ruby 931 КБ Haml 1021 КБ
  3. 3. Хороший front-end Sass.icon { background: inline-image("icons/add.png"); @include border-radius(3px);} ↓.icon { background: url(data:image/png;base64,iVBORw0KGgo…); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
  4. 4. Хороший front-endОбъединить, сжать и закешировать<script src="core.js"></script><script src="flash.js"></script><script src="home.js"></script> ↓<script src="app.js?1314096925"></script>
  5. 5. Сейчас — Rails 2.x…3.0 Barista Jammitapp/coffeescripts/core.coffee config/assets.yml javascripts: ↓ app:public/javascripts/core.js - public/javascripts/core.js - public/javascripts/flash.js - public/javascripts/home.js app/layouts/application.haml = include_javascripts :app
  6. 6. Проблемы― Не учитываются зависимости― Интеграция — сообщения об ошибках― Сложно расширить функционал― Cache buster file?timestamp иногда не работает― Сторонние JS-библиотеки в репозитории― Плагин не может подключить свои JS или CSS― JS- и CSS-файлы не в app/
  7. 7. Assets Pipeline ЗависимостиВ каждом файле указывается от какихфайлов он зависит:CoffeeScript:#= require userSCSS@import user;
  8. 8. Assets PipelineСообщения об ошибках
  9. 9. Assets Pipeline Фильтрыapp/assets/javascripts/application.js.erb.coffeeСначала откомпилить CoffeeScript в JS, а потом ERBМожно добавить свои фильтры:Rails.application.assets.register_postprocessor( application/javascript, Sprockets::SafetyColons)
  10. 10. Assets Pipeline Cache busterapplication-25b93845b866436a84154200dd8d05e0.js ↑ хеш от содержимого вместо времени изменения
  11. 11. Assets Pipeline Сторонние JS и CSS файлыJS и CSS ищется вapp/assets/ файлы проектаlib/assets/ свои библиотекиvendor/assets/ сторонние библиотекиА так же во всех gem’ах с Rails Engine
  12. 12. Как работает Assets Pipeline Шаг 1. ГенерацияСобираем логику всех страниц в этом файлеapp/assets/javascripts/application.js.coffeeЛогика страницы пользователей:app/assets/javascripts/user.js.coffeeСобираем стили всех страниц в этом файлеapp/assets/stylesheets/application.css.scssСтили страницы пользователей:app/assets/stylesheets/user.css.scss
  13. 13. Как работает Assets Pipeline Шаг 2. Подключаемapp/views/layout/application.html.haml= stylesheet_link_tag :application= javascript_include_tag :application
  14. 14. Как работает Assets Pipeline Шаг 3. Объединениеapp/assets/javascrips/application.js.coffee#= require user#= require_tree pagesapp/assets/stylesheets/application.css.scss@import user
  15. 15. Как работает Assets Pipeline Шаг 4. БиблиотекиGemfilegem "jquery-rails"app/assets/javascripts/application.js.coffee#= require jquery
  16. 16. Как работает Assets Pipeline Шаг 5. ИзображенияПуть к изображениям: app/assets/imagesВ SCSS и SASS все картинки надо указывать черезimage-url() вместо url().icon { background: image-url("user/icon.png"); }В Haml использовать всегдаimage_tag("user/icon.png") илиimage_path("user/icon.png")
  17. 17. Как работает Assets Pipeline Шаг 6. Фильтры1. Preprocessor — Смотрим какие файлы от каких зависят2. Engine — Компилируем (CoffeeScript → JS, SCSS → CSS)3. Postprocessor — Исправляем файлы. Например, вставляем ; в JS-файлы4. Собираем файлы в один5. Bundle processors — Исправляем файлы-пакеты. Например, убираем повторы @charset в CSS-файлах6. Compressor — Убираем лишние символы в JS и CSS.7. Записываем файлы и сжимает в Gzip, чтобы веб-серверу было проще
  18. 18. Как работает Assets Pipeline Шаг 7. ОтладкаВ development файлы идут отдельно:<script src=/assets/application.js?body=1></script><script src=/assets/user.js?body=1></script><script src=/assets/page/home.js?body=1></script>Чтобы выключить объединение в production,надо добавить ?debug_assets=1 в URL и разрешитьотладку в настройках:config.assets.allow_debugging = true
  19. 19. Как работает Assets Pipeline Шаг 8. ВыкладкаЗаранее собираются только application.css и applications.js.Остальные пакеты нужно добавить в настройках:config.assets.precompile += %w( admin.js admin.css )Перед деплоем нужно выполнить:rake assets:precompileДля Capistrano 2.8 есть готовые рецепты:load deploy/assets
  20. 20. Как работает Assets Pipeline Шаг 9. КешированиеГоворим браузеру кешировать файлы ине спрашивать нас больше о них:location ~ ^/(assets)/ { root /path/to/public; gzip_static on; expires max; add_header Cache-Control public;}
  21. 21. Как выложить свою JS-библиотеку1. Стили и JS разместить в vendor/assets/2. В lib/имя_гема.rb сделать класс, наследующий ::Rails::Engine3. Написать имя_гема.gemspec, собрать gem и выложить на rubygems.org
  22. 22. Вопросы?ai@evilmartians.comevilmartians.com

×