Use Bootstrap-Sass 3.x and Font Awesome (bower-rails vs. rails-assets)

Railsで一般的なJS/CSSのパッケージ導入方法としては以下のものが挙げられる．
ここではBootstrap（Sass ver.）を例に．

• 自分でDownloadしてきてぶち込む
  • vendor/assetsに
  • submoduleで
• gemから（gem 'bootstrap-sass'）
• rails-assetsから（gem 'rails-assets-bootstrap-sass-official'）
• bowerから
  • bower-railsから
• そもそもUIまわりをRailsから分離しちゃう

このへんの利点欠点については『bowerパッケージをbundlerで管理するRails Assetsを使ってみた』にわかりやすく丁寧に書かれてます．

ここではbower-rails及びrails-assetsからBootstrap（Sass ver.）とFont Awesomeを利用するまでを比較してみます．

bower-railsでBootstrap & Font Awesome

注意！ jQueryはbowerから入れるのでjquery-railsは不要！

Gemfile

gem 'bower-rails'

Bowerfile

asset 'bootstrap-sass-official'
asset 'fontawesome'

config/initializer/assets.rb

Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'bootstrap-sass-official', 'assets', 'fonts')

Rails.application.config.assets.precompile << /.*.(?:eot|svg|ttf|woff)$/

JavaScript

bootstrap-sprockets.jsはbootstrapのJavaScript componentsをrequireしてるだけ．
必要な物だけ個別にrequireしてもよい．

app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sass-official/assets/javascripts/bootstrap-sprockets
//= require turbolinks
//= require_tree .

Stylesheet

_bootstrap-sprockets.scssはフォントや画像のasset path helperをいい感じに設定してくれるfunctionを定義してる．

app/assets/stylesheets/application.css.scss

/*
 *= require_tree .
 *= require fontawesome
 *= require_self
 */

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

rails-assetsでBootstrap & Font Awesome

注意！ こちらもjQueryはrails-assetsから入れるのでjquery-railsは不要！

Gemfile

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

gem 'rails-assets-bootstrap-sass-official'
gem 'rails-assets-fontawesome'

JavaScript

先ほどのbootstrap-sprockets.jsと同じことをbootstrap-sass-official.jsがやってくれてる．

app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sass-official
//= require turbolinks
//= require_tree .

Stylesheet

$icon-font-pathをうまいこと設定しとくことでフォントのパスを解決できる．
bower_components/...がないぶん，こちらのほうが短くなってますね．

app/assets/stylesheets/application.css.scss

/*
 *= require_tree .
 *= require fontawesome
 *= require_self
 */

$icon-font-path: "bootstrap-sass-official/";

@import "bootstrap-sass-official/bootstrap-sprockets";
@import "bootstrap-sass-official/bootstrap";

まとめ

どちらも依存関係をちゃんと解決してくれてるってところがすばらしいですね（今回の場合だとjQuery）．流石bower．

やっぱrails-assetsは楽．nodeもいらないし．

うまいこと出来てる．

参考URL

• bowerパッケージをbundlerで管理するRails Assetsを使ってみた
• bower-rails
• rails-assets