The document discusses the asset pipeline in Rails, which provides an optimized way to manage assets like CSS, JavaScript, and images. It addresses issues like outdated assets, difficulty maintaining code, and lack of organization. The asset pipeline offers optimization mechanisms, version control for assets, and the ability to write assets in languages like CoffeeScript and Sass/SCSS. It provides rules for organizing assets and leverages tools like Compass to enhance features of front-end frameworks.

1. Asset Pipeline
天龍國 Developer 的 Assets 管理法
1
星期日, 4月 15, 1

2. Xdite Cheng
github.com/xdite
xdite
2
星期日, 4月 15, 2

3. 小蟹
PIXNET
github.com/wildjcrt
wildjcrt
Ruby Taiwan
RailsTuesday
3
星期日, 4月 15, 3

4. Assets
▪ CSS
▪ JavaScript
▪ Image
4
星期日, 4月 15, 4

5. Asset = 次等公民
5
星期日, 4月 15, 5

6. public/
• icon-01.png • reset.css
• icon-02.png • tinymce/
• jquery.js • ....
• logo.png
• main.css
6
星期日, 4月 15, 6

7. Asset 管理上需要面對的問題
▪ Optimization Issue
▪ Outdate
▪ Hard to write maintainable code
7
星期日, 4月 15, 7

8. Optimization Issue
▪ Compress / Trim
▪ CSS Sprite
▪ Development / Deploy
▪ CDN / clear cache
8
星期日, 4月 15, 8

9. Outdate
▪ jQuery
▪ jQuery UI
▪ Bootstrap
▪ TinyMCE
▪ ....
9
星期日, 4月 15, 9

10. Maintain Issue
#header{ ... }
#header nav.main{ ... }
#header nav.main a{ ...}
#header nav.main a:hover{...}
不覺得這樣寫很囉嗦的請舉手
10
星期日, 4月 15, 10

11. Maintain Issue
▪ JavaScript
11
星期日, 4月 15, 11

12. Asset Pipeline
Since Rails 3.1
12
星期日, 4月 15, 12

13. 以一個全新的角度去管理 Asset
13
星期日, 4月 15, 13

14. Asset Pipeline 提供
▪ Optimization Mechanism
▪ Organization Rules
▪ Asset Version Control
▪ Write assets in other language
14
星期日, 4月 15, 14

15. 這麼神？
15
星期日, 4月 15, 15

16. Optimization
▪ Compress / Trim
▪ CSS Sprite
▪ Development / Deploy
▪ CDN / clear cache
內建 Best Practices，Deploy 時自動完成
16
星期日, 4月 15, 16

17. Organization Rules
▪ vendor/assets/
▫ jQuery, TinyMCE, Bootstrap...
▪ lib/assets/
▫ utility
▪ app/assets
▫ main, sidebar, font,
17
星期日, 4月 15, 17

18. Organization Rules
/*
*= require bootstrap
*= require sidebar
*= require common
*= require_self
*= require_tree .
*/
一律視為 /assets 下檔案掛起來
18
星期日, 4月 15, 18

19. Asset Version Control
▪ Bundler => Asset As Gem
▫ Gemfile
gem "jquery-rails"
gem "tinymce-rails"
gem "bootstrap", "1.4.1"
○ application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require tinymce
19
星期日, 4月 15, 19

20. Front-end Meta Languages
▪ CoffeeScript
▪ Sass / SCSS
▫ Compass
20
星期日, 4月 15, 20

21. CoffeeScript
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
21
星期日, 4月 15, 21

22. CoffeeScript
▪ avoid the“bad parts”
▫ avoid global variable / function
▫ 使用 -> 和 indent (縮排)
▫ 容易偵測 syntax error
22
星期日, 4月 15, 22

23. Sass / SCSS
#header{ ... }
#header nav.main{ ... }
#header nav.main a{ ...}
#header nav.main a:hover{...}
23
星期日, 4月 15, 23

24. Sass / SCSS
#header{
nav.main{
a{
▪ We&:hover{do this way
should }
}
}
}
24
星期日, 4月 15, 24

25. Compass
▪ CSS Authoring Framework
▫ Blueprint
▫ 960
▫ fancy buttons
▫ CSS3 Pie
25
星期日, 4月 15, 25

26. Compass
▪ Features
▫ replace-text
▫ border-radius
▫ gradient
▫ sprite
26
星期日, 4月 15, 26

27. Organize SCSS
▪ by default block ( header / footer / sidebar )
▪ by special block
▪ by feature
▪ by (Rails) controller
▪ by page specific
27
星期日, 4月 15, 27

28. Compass and bootstrap
@import "bootstrap";
// config variables first and import compass
$base-font-size: 16px;
$base-line-height: 24px;
$relative-font-sizing: false;
@import "compass";
@import "module/mixins";
@import "module/box";
@import "module/modal"; // override bootstrap modal effect
@import "partial/header";
@import "partial/sidebar-items";
@import "partial/sidebar-tools";
@import "partial/sidebar"; ▪ main.css
28
星期日, 4月 15, 28

29. Reference
▪ http://upgrade2rails31.com/asset-pipeline
▪ http://upgrade2rails31.com/sass-scss
▪ http://upgrade2rails31.com/coffee-script
▪ http://blog.xdite.net/posts/2012/02/06/
extend-bootstrap-in-compass/
▪ https://github.com/anjlab/bootstrap-rails
29
星期日, 4月 15, 29

30. Thanks
30
星期日, 4月 15, 30