Your SlideShare is downloading. ×
0
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Assets Pipeline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Assets Pipeline

2,609

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,609
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Assets Pipeline,или как я перестал боятся Rails 3.1 иполюбил клиентскую оптимизациюАндрей Ситникai@evilmartians.comevilmartians.com
  • 2. Языки в ГрупонеCoffeeScript 303 КБ Sass 619 КБ Ruby 931 КБ Haml 1021 КБ
  • 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. Хороший front-endОбъединить, сжать и закешировать<script src="core.js"></script><script src="flash.js"></script><script src="home.js"></script> ↓<script src="app.js?1314096925"></script>
  • 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. Проблемы― Не учитываются зависимости― Интеграция — сообщения об ошибках― Сложно расширить функционал― Cache buster file?timestamp иногда не работает― Сторонние JS-библиотеки в репозитории― Плагин не может подключить свои JS или CSS― JS- и CSS-файлы не в app/
  • 7. Assets Pipeline ЗависимостиВ каждом файле указывается от какихфайлов он зависит:CoffeeScript:#= require userSCSS@import user;
  • 8. Assets PipelineСообщения об ошибках
  • 9. Assets Pipeline Фильтрыapp/assets/javascripts/application.js.erb.coffeeСначала откомпилить CoffeeScript в JS, а потом ERBМожно добавить свои фильтры:Rails.application.assets.register_postprocessor( application/javascript, Sprockets::SafetyColons)
  • 10. Assets Pipeline Cache busterapplication-25b93845b866436a84154200dd8d05e0.js ↑ хеш от содержимого вместо времени изменения
  • 11. Assets Pipeline Сторонние JS и CSS файлыJS и CSS ищется вapp/assets/ файлы проектаlib/assets/ свои библиотекиvendor/assets/ сторонние библиотекиА так же во всех gem’ах с Rails Engine
  • 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. Как работает Assets Pipeline Шаг 2. Подключаемapp/views/layout/application.html.haml= stylesheet_link_tag :application= javascript_include_tag :application
  • 14. Как работает Assets Pipeline Шаг 3. Объединениеapp/assets/javascrips/application.js.coffee#= require user#= require_tree pagesapp/assets/stylesheets/application.css.scss@import user
  • 15. Как работает Assets Pipeline Шаг 4. БиблиотекиGemfilegem "jquery-rails"app/assets/javascripts/application.js.coffee#= require jquery
  • 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. Как работает 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. Как работает 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. Как работает 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. Как работает Assets Pipeline Шаг 9. КешированиеГоворим браузеру кешировать файлы ине спрашивать нас больше о них:location ~ ^/(assets)/ { root /path/to/public; gzip_static on; expires max; add_header Cache-Control public;}
  • 21. Как выложить свою JS-библиотеку1. Стили и JS разместить в vendor/assets/2. В lib/имя_гема.rb сделать класс, наследующий ::Rails::Engine3. Написать имя_гема.gemspec, собрать gem и выложить на rubygems.org
  • 22. Вопросы?ai@evilmartians.comevilmartians.com

×