Asset pipeline   osdc
Upcoming SlideShare
Loading in...5
×
 

Asset pipeline osdc

on

  • 894 views

 

Statistics

Views

Total Views
894
Views on SlideShare
871
Embed Views
23

Actions

Likes
1
Downloads
8
Comments
0

2 Embeds 23

https://twimg0-a.akamaihd.net 21
https://si0.twimg.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Asset pipeline   osdc Asset pipeline osdc Presentation Transcript

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