Bowerとrailsの統合

bower js rails

方法

  • Railsアプリケーションのルートディレクトリに.bowerrcを作成
  • application.rbの設定でBowerのインストールディレクトリvendor/assets/componentsをAssetsパスに通す
  • application.js等から呼び出し

.bowerrc

{
  "directory" : "vendor/assets/components",
  "json"      : "component.json"
}

config/application.rb

# config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

application.js

//= require jquery/jquery-min
//= require string.js/lib/string.min.js

bower-rails

railsとbowerの統合はbower-railsのgemを使用する手もあります。

bower-railsを使用する場合、独自のDSLが用意されています。
独自DSLを使う場合は、Jsfileというファイルを作成し、以下のように記述します

Jsfile

assets_path "assets/javascripts"

# Puts files under ./vendor/assets/javascripts
group :vendor do
  js 'jquery', '2.0.0'
  js 'jquery-ujs' # Assummes it's latests
  js 'jquery-autopager', 'http://lagoscript.org/files/jquery/autopager/jquery.autopager-1.0.0.js'
end

インストールのコマンドは

rake bower:dsl:install

実行するとvendor/assets/javascripts以下にbower.jsonが作成され、それをもとにbower installがされてvendor/assets/javascripts/components以下にJSが入ります。
このままではassetsで使えないので、vendor/assets/javascripts/componentsをassets pathに追加ます。

config/application.rb

# config/application.rb
config.assets.paths << Rails.root.join("vendor", "assets", "javascripts", "components")

最後にJSのrequireのパスを書き換えて完了です。今回のJsfileだと下記のような感じになります。

//= require jquery
//= require jquery-ujs/src/rails.js
//= require jquery-autopager/index.js