ドジっ娘でもかんたん！ bower × rails assets (loupe study)

ドジっ娘でもかんたん！

Bower � Rails Assets

LOUPE Study 2015.03.23.Mon@yamasy1549

�

before after

祝 �

loupe-icon が Web フォントになりました

1

あらすじ

CTO「アイコンはWebフォント化しよう」

やましー「任せてください」

2

あらすじ

CTO「アイコンはWebフォント化しよう」

やましー「任せてください」

CTO「あと、Gem化も」

やましー「(@_@)」

3

あらすじ

CTO「アイコンはWebフォント化しよう」

やましー「任せてください」

CTO「あと、Gem化も」

やましー「(@_@)」

フロントエンド

バージョン管理

4

あらすじ

やましー「それだったら・・・」

フロントエンド

バージョン管理

5

あらすじ

やましー「それだったら・・・」

フロントエンド

バージョン管理

Bower � Rails Assets で

幸せになりましょう！

6

Bower � Rails Assets がないとき

「Web フォントを置くよ！」

$ ls app/assets/fonts/

loupeicons.woff loupeicons.ttf

loupeicons.eot loupeicons.svg

7

Bower � Rails Assets がないとき

「Web フォントを置くよ！」

$ ls app/assets/fonts/

loupeicons.woff loupeicons.ttf

loupeicons.eot loupeicons.svg

「専用の CSS をかくよ！」

$ vim app/assets/stylesheets/_loupeicons.css

@font-face { ...

8

Bower � Rails Assets がないとき

「Web フォントを置くよ！」

$ ls app/assets/fonts/

loupeicons.woff loupeicons.ttf

loupeicons.eot loupeicons.svg

「専用の CSS をかくよ！」

$ vim app/assets/stylesheets/_loupeicons.css

@font-face { ...

「CSS を読み込・・・」

@import "./loupeicons";9

Bower � Rails Assets がないとき

「Web フォントを置くよ！」

$ ls app/assets/fonts/

loupeicons.woff loupeicons.ttf

loupeicons.eot loupeicons.svg

「専用の CSS をかくよ！」

$ vim app/assets/stylesheets/_loupeicons.css

@font-face { ...

「CSS を読み込・・・」

@import "./loupeicons";

「ふぇぇ ややこしい＞＜」

♂�

↓手順が多すぎて入りきらなかった

♂Bower � Rails Assets がないとき

「Web フォントを置くよ！」

$ ls app/assets/fonts/

loupeicons.woff loupeicons.ttf

loupeicons.eot loupeicons.svg

「専用の CSS をかくよ！」

$ vim app/assets/stylesheets/_loupeicons.css

@font-face { ...

「CSS を読み込・・・」

@import "./loupeicons";

「ふぇぇ ややこしい＞＜」

♂�

Bower � Rails Assets があるとき

「Gem を追加するよ！」

$ vim Gemfile

source 'https://rails-assets.org'

gem ‘rails-assets-loupe-icon’

12

Bower � Rails Assets があるとき

「Gem を追加するよ！」

$ vim Gemfile

source 'https://rails-assets.org'

gem ‘rails-assets-loupe-icon’

「CSS を読み込むよ！」

$ vim app/assets/stylesheets/application.css

*= require loupe-icon

13

「かんたんにできた！」

�

Bower � Rails Assets があるとき

「Gem を追加するよ！」

$ vim Gemfile

source 'https://rails-assets.org'

gem ‘rails-assets-loupe-icon’

「CSS を読み込むよ！」

$ vim app/assets/stylesheets/application.css

*= require loupe-icon

14

Bower � Rails Assets があるとき

Bower � の

Rails Assets � アセットファイルをいい感じに整理

�フロントエンド バージョン管理

15

♂

Bower � Rails Assets があるとき

Bower � の

Rails Assets � アセットファイルをいい感じに整理

フロントエンド バージョン管理

�

16

♂

♂

Bower � Rails Assets があるとき

Bower � の

Rails Assets � アセットファイルをいい感じに整理

フロントエンド バージョン管理

�Bower � Rails Assets で

幸せになりましょう！

17

♂Bower � Rails Assets があるとき

Bower � の

Rails Assets � アセットファイルをいい感じに整理

フロントエンド バージョン管理

�

18

http://qiita.com/yamasy1549/items/b1526071a27d8ac24580

Qiita にあげてみました。

「ドジっ娘でもかんたん！ Bower × Rails Assets」