Asset pipeline osdc
-
Upload
wildjcrt -
Category
Technology
-
view
760 -
download
1
Transcript of Asset pipeline osdc
Asset Pipeline天龍國 Developer 的 Assets 管理法
1
1星期日, 4月 15, 2012
github.com/xdite
xdite
Xdite Cheng
2
2星期日, 4月 15, 2012
PIXNETgithub.com/wildjcrtwildjcrt
Ruby TaiwanRailsTuesday
小蟹
3
3星期日, 4月 15, 2012
Assets
▪CSS
▪ JavaScript
▪ Image
4
4星期日, 4月 15, 2012
Asset = 次等公民
5
5星期日, 4月 15, 2012
public/• icon-01.png
• icon-02.png
• jquery.js
• logo.png
• main.css
• reset.css
• tinymce/
• ....
6
6星期日, 4月 15, 2012
Asset 管理上需要面對的問題
▪Optimization Issue
▪Outdate
▪Hard to write maintainable code
7
7星期日, 4月 15, 2012
Optimization Issue
▪Compress / Trim
▪CSS Sprite
▪Development / Deploy
▪CDN / clear cache
8
8星期日, 4月 15, 2012
Outdate
▪ jQuery
▪ jQuery UI
▪ Bootstrap
▪ TinyMCE
▪ ....
9
9星期日, 4月 15, 2012
Maintain Issue
#header{ ... }#header nav.main{ ... }#header nav.main a{ ...}#header nav.main a:hover{...}
不覺得這樣寫很囉嗦的請舉手
10
10星期日, 4月 15, 2012
Maintain Issue
11
▪ JavaScript
11星期日, 4月 15, 2012
Asset PipelineSince Rails 3.1
12
12星期日, 4月 15, 2012
以一個全新的角度去管理 Asset
13
13星期日, 4月 15, 2012
Asset Pipeline 提供
▪Optimization Mechanism
▪Organization Rules
▪ Asset Version Control
▪Write assets in other language
14
14星期日, 4月 15, 2012
這麼神?
15
15星期日, 4月 15, 2012
Optimization
▪Compress / Trim
▪CSS Sprite
▪Development / Deploy
▪CDN / clear cache內建 Best Practices,Deploy 時自動完成
16
16星期日, 4月 15, 2012
Organization Rules▪ vendor/assets/
▫ jQuery, TinyMCE, Bootstrap...
▪ lib/assets/
▫ utility
▪ app/assets
▫main, sidebar, font,
17
17星期日, 4月 15, 2012
Organization Rules
/* *= require bootstrap *= require sidebar *= require common *= require_self *= require_tree .*/
一律視為 /assets 下檔案掛起來
18
18星期日, 4月 15, 2012
Asset Version Control▪ Bundler => Asset As Gem
▫Gemfilegem "jquery-rails"gem "tinymce-rails"gem "bootstrap", "1.4.1"
○ application.js//= require jquery//= require jquery_ujs//= require bootstrap//= require tinymce
19
19星期日, 4月 15, 2012
Front-end Meta Languages
▪CoffeeScript
▪ Sass / SCSS
▫Compass
20
20星期日, 4月 15, 2012
CoffeeScript
class Animal constructor: (@name) ->
move: (meters) -> alert @name + " moved #{meters}m."
class Snake extends Animal move: -> alert "Slithering..." super 5
21
21星期日, 4月 15, 2012
CoffeeScript
▪ avoid the“bad parts”
▫ avoid global variable / function
▫使用 -> 和 indent (縮排)
▫容易偵測 syntax error
22
22星期日, 4月 15, 2012
Sass / SCSS
#header{ ... }#header nav.main{ ... }#header nav.main a{ ...}#header nav.main a:hover{...}
23
23星期日, 4月 15, 2012
Sass / SCSS
▪We should do this way
#header{ nav.main{ a{ &:hover{ } } }}
24
24星期日, 4月 15, 2012
Compass
▪CSS Authoring Framework
▫ Blueprint
▫ 960
▫ fancy buttons
▫CSS3 Pie
25
25星期日, 4月 15, 2012
Compass
▪ Features
▫ replace-text
▫ border-radius
▫ gradient
▫ sprite
26
26星期日, 4月 15, 2012
Organize SCSS
▪ by default block ( header / footer / sidebar )
▪ by special block
▪ by feature
▪ by (Rails) controller
▪ by page specific
27
27星期日, 4月 15, 2012
Compass and bootstrap
▪main.css
28
@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";
28星期日, 4月 15, 2012
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
29星期日, 4月 15, 2012
Thanks
30
30星期日, 4月 15, 2012