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