I've been working through this issue for the last few days, and have settled on the following process.
Use the bower-rails gem. It provides a number of nice rake tasks that help integrate the use of bower with a rails application and the asset pipeline. I prefer to stick with the bower.json configuration instead of the ruby-based DSL that bower-rails provides. I stick with the default bower location that stores assets in vendor/assets/bower_components. Make sure to add the following to your application.rb.
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
Once you have packages added to your bower.json, then you run the following:
rake bower:install
to install your javascript packages. You then reference the javacript in your application.js and application.css files.
As @andrew-hacking noted above rails and bower do not play nicely with javascript packages that have css and images, specifically css that references images. Bower-rails aids in fixing this issue with the provided rake task:
rake bower:resolve
It resolves relative asset paths in components by rewriting url references in component css files with the rails helper method to reference the asset in an asset pipeline friendly way. See BowerRails::Performer#resolve_asset_paths for more detail.
My preference is to check in all of the bower_components into our repository, so we run bower:install followed by bower:resolve. You then need to add the images referenced within the package to your config.assets.precompile list for your staging and production environments. For example here is the setup for adding the select2 javascript component to your rails project using bower and rails.
bower.json:
{
"name": "Acme",
"private": true,
"dependencies": {
"select2": "3.5.1"
}
}
app/assets/javascripts/application.js.coffee:
#= require select2/select2
app/assets/stylesheets/application.css.sass
//= require select2/select2
config/environments/staging.rb and config/environments/production.rb:
config.assets.precompile += ["select2/*.png",
"select2/*.gif"]
It's not perfect, but it gives you the dependency management of your javascript components, and it's better then trying to figure out what gems you need to pull in to get the desired javascript component enabled for the asset pipeline.