bowerを使ってみたい
RailsでJavaScriptライブラリを管理する時、どうしたら良いのか悩んでいた。bowerを使いたい。。
がそのままbower installしてbower_componentsできても、asset pipelineにうまく乗ってくれるかわからん。
asset pipeline難しすぎ；；
bower-rails がすべてを解決してくれるらしい！
前提
- bowerはインストール済
- いろいろやらかしてよいrailsのディレクトリは用意済
- railsはbundlerでインストールした
bower-railsをインストール
Gemfileを編集
以下を追加。
gem "bower-rails"
bundle updateする。
bower-railsの初期設定
$ bundle exec rails g bower_rails:initialize
以下の設定ファイルが作られる。
- Bowerfile
- config/initializers/bower_rails.rb
最初、bower_rails:initializeしないで、エディタでBowerfile作ってみたら、エラー吐いて止まった。。
インストールするライブラリを決める(Bowerfileの編集）
とりあえずbootstrap入れてみる。
asset 'bootstrap'
bower-railsの実行（install）
$ bundle exec rake bower:install
bowerでのインストールが走る。行き先はvendor/assets/bower_components
今回はbootstrapをインストールしたので、一緒に必要なjqueryも入ってくるみたい。
初回インストールの場合、bower.jsonも作られる。
Rails側の読み込み設定
assetsとしては読み込み対象になってる場所に入ってるらしく、config設定はいらない。
css, javascriptの読み込み設定のみ。
css (app/assets/stylesheets/application.css)
以下を追加。
*= require bootstrap
javascript (app/assets/javascripts/application.js)
以下を追加。
//= require bootstrap
bootstrap用のlessを使えるようにする
Gemfileにlessが入ってないと、エラーになるので、以下のgemも追加する。
rubyracerはrailsのデフォルトでコメントアウトされてるので、コメント外せばOK
gem "less"
gem "therubyracer"
bundle update 忘れずに。
おまけ（動作確認）
rails newしたばかりのrails appで試していたので、ちゃんとスタイル適用が成功したところがわからない。
静的ページ1個作って動作確認したところを書いとく。
(RailsTutorialの静的ページのところ）
$ bundle exec rails g controller StaticPages home help --no-test-framework
出来上がったapp/views/static_pages/home.html.erbを編集してbootstrapのスタイルが適用されているかチェック。
glyphiconの読み込みチェックもすると、ちゃんとasset pipelineに読み込まれてることがわかって良い感じ。
<a href="#" class="btn btn-success">
<i class="glyphicon glyphicon-plane"></i>
<span> ファイルをアップロード</span>
</a>
bundle exec rails sでサーバー起動。
http://localhost:3000/static_pages/home
でちゃんとボタンとglyphiconが読み込まれていればOK
bootstrap jsの読み込みも確認したければ、ドロップダウンとか書いてみると良い。（読み込まれてない場合ドロップダウンクリックしても何も起きない）
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>ドロップダウン１</li>
<li>ドロップダウン２</li>
</ul>
</li>
</ul>
愚痴
ほんとは Middleman + bower やりたかったんだけど、そっちでもasset pipeline機構に阻まれて、結局解決できずでじゃあrailsはどないなっとんねん？と思って調べてたら以下の参考リンク達に救われた。。
middleman では bootstrap css の読み込みまではできたけど、 glyphicon のロードがうまくできず、挫折・・