Rails3でTwitter Bootstrap

Rails3でTwitter Bootstrapを使いたい。
twitter-bootstrap-railsとかではなく、素のまま組み込んでみたい。

まず、bootstrapはvendor/assets以下に導入します。

vendor
├─assets
│  ├─javascripts
│  │      bootstrap.js
│  │      bootstrap.min.js
│  │
│  └─stylesheets
│          bootstrap-responsive.css
│          bootstrap-responsive.min.css
│          bootstrap.css
│          bootstrap.min.css

application.html.erbでは、以下のように参照します。

  <%= stylesheet_link_tag    "bootstrap.min.css" %>
  <%= javascript_include_tag "bootstrap.min.js" %>

ここまでで、developmentモードでは動作するはず。


さらにherokuで動かす場合は、assets(css, javascript)をpublicディレクトリ以下にコンパイルする必要があります。
まず、コンパイル対象にbootstrapを追加するため、config/envirments/production.rbに追記。

config.assets.precompile += %w(bootstrap.min.js)
config.assets.precompile += %w(bootstrap.min.css)

んで、以下のコマンド実行。

RAILS_ENV=production bundle exec rake assets:precompile

こんな感じのファイルが出来るはず。
これを含めてherokuにpushすればOK。

public
└─assets
        bootstrap.min-92b9ee34b16752b445620df2772f1282.css
        bootstrap.min-92b9ee34b16752b445620df2772f1282.css.gz
        bootstrap.min-ab12e4859db634f5773422af4cc9711d.js
        bootstrap.min-ab12e4859db634f5773422af4cc9711d.js.gz
        bootstrap.min.css
        bootstrap.min.css.gz
        bootstrap.min.js
        bootstrap.min.js.gz
        （略）

あと、local＆WEBrickな環境でproductionモードを試す場合、
config/environments/production.rbに次の設定も必要。

# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true

これだけにずいぶん苦労したよ。。