ドジっ娘でもかんたん！ 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「あと、Gem化も」

やましー「(@_@)」

3

あらすじ



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






「専用の CSS をかくよ！」

$ vim app/assets/stylesheets/_loupeicons.css

@font-face { ...

8








@font-face { ...

「CSS を読み込・・・」

@import "./loupeicons";9








@font-face { ...


@import "./loupeicons";

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

♂�

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

♂Bower � Rails Assets がないとき







@font-face { ...


@import "./loupeicons";

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

♂�

Bower � Rails Assets があるとき

「Gem を追加するよ！」

$ vim Gemfile

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

gem ‘rails-assets-loupe-icon’

12



$ vim Gemfile



「CSS を読み込むよ！」

$ vim app/assets/stylesheets/application.css

*= require loupe-icon

13

「かんたんにできた！」

�



$ vim Gemfile



「CSS を読み込むよ！」

$ vim app/assets/stylesheets/application.css

*= require loupe-icon

14


Bower � の

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

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

15

♂


Bower � の


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

�

16

♂

♂


Bower � の



�Bower � Rails Assets で

幸せになりましょう！

17

♂Bower � Rails Assets があるとき

Bower � の



�

18

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

Qiita にあげてみました。

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

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

Engineering