Asset pipeline osdc

1,072 views
938 views

Published on

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

No Downloads
Views
Total views
1,072
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Asset pipeline osdc

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

×