Asset pipeline osdc3. 小蟹
PIXNET
github.com/wildjcrt
wildjcrt
Ruby Taiwan
RailsTuesday
3
星期日, 4月 15, 3
4. Assets
▪ CSS
▪ JavaScript
▪ Image
4
星期日, 4月 15, 4
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
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
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