Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Asset pipeline osdc

1,184 views

Published on

Published in: Technology
  • Be the first to comment

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

×