Assets Pipeline,или как я перестал боятся Rails 3.1 и полюбил клиентскую оптимизацию

Андрей Ситникai@evilmartians.comevilmartians.com

Языки в Групоне

CoffeeScript 303 КБ

619 КБ

931 КБ

1021 КБ

Sass

Ruby

Haml

Хороший front-endSass

.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;}

Хороший front-endОбъединить, сжать и закешировать

<script src="core.js"></script><script src="flash.js"></script><script src="home.js"></script>

↓

<script src="app.js?1314096925"></script>

Сейчас — Rails 2.x…3.0

Jammitconfig/assets.ymljavascripts: app: - public/javascripts/core.js - public/javascripts/flash.js - public/javascripts/home.js

app/layouts/application.haml= include_javascripts :app

Barista

app/coffeescripts/core.coffee

↓

public/javascripts/core.js

Проблемы

― Не учитываются зависимости

― Интеграция — сообщения об ошибках

― Сложно расширить функционал

― Cache buster file?timestamp иногда не работает

― Сторонние JS-библиотеки в репозитории

― Плагин не может подключить свои JS или CSS

― JS- и CSS-файлы не в app/

Assets PipelineЗависимости

В каждом файле указывается от каких файлов он зависит:

CoffeeScript:

#= require 'user'

SCSS

@import 'user';

Assets PipelineСообщения об ошибках

Assets PipelineФильтры

app/assets/javascripts/application.js.erb.coffee

Сначала откомпилить CoffeeScript в JS, а потом ERB

Можно добавить свои фильтры:

Rails.application.assets.register_postprocessor( 'application/javascript', Sprockets::SafetyColons)

Assets PipelineCache buster

application-25b93845b866436a84154200dd8d05e0.js ↑хеш от содержимоговместо времени изменения

Assets PipelineСторонние JS и CSS файлы

JS и CSS ищется в

app/assets/ файлы проекта

lib/assets/ свои библиотеки

vendor/assets/ сторонние библиотеки

А так же во всех gem’ах с Rails Engine

Как работает 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

Как работает Assets PipelineШаг 2. Подключаем

app/views/layout/application.html.haml

= stylesheet_link_tag :application= javascript_include_tag :application

Как работает Assets PipelineШаг 3. Объединение

app/assets/javascrips/application.js.coffee

#= require 'user'#= require_tree 'pages'

app/assets/stylesheets/application.css.scss

@import 'user'

Как работает Assets PipelineШаг 4. Библиотеки

Gemfile

gem "jquery-rails"

app/assets/javascripts/application.js.coffee

#= require jquery

Как работает 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")

Как работает 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,чтобы веб-серверу было проще

Как работает 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

Как работает Assets PipelineШаг 8. Выкладка

Заранее собираются только application.css и applications.js.Остальные пакеты нужно добавить в настройках:

config.assets.precompile += %w( admin.js admin.css )

Перед деплоем нужно выполнить:rake assets:precompile

Для Capistrano 2.8 есть готовые рецепты:load 'deploy/assets'

Как работает Assets PipelineШаг 9. Кеширование

Говорим браузеру кешировать файлы ине спрашивать нас больше о них:

location ~ ^/(assets)/ { root /path/to/public; gzip_static on; expires max; add_header Cache-Control public;}

Как выложить своюJS-библиотеку

1. Стили и JS разместить в vendor/assets/

2. В lib/имя_гема.rb сделать класс,наследующий ::Rails::Engine

3. Написать имя_гема.gemspec, собрать gemи выложить на rubygems.org

Вопросы?

ai@evilmartians.comevilmartians.com