Railsでbowerを使ってJavaScriptのパッケージ管理をする

Bowerを使ってJavaScriptのパッケージ管理をしたく調べたので書いておきます。

まず、bowerのインストール

 $npm install -g bower

続いてRails側の設定ですが、bower-railsを使います。その際jquery-railsはコメントアウトしておきます。

#gem 'jquery-rails'

 # bower
 gem 'bower-rails', '~> 0.5.0'

bundle installを実施

$ bundle install

次にBowerfileを作成し、以下のように作成します。

 assets_path "assets/javascripts"
 
  # Puts files under ./vendor/assets/javascripts
 group :vendor, :assets_path => "assets/javascript" do
    asset 'jquery'
    asset 'jquery-ujs'
 
    asset 'swiper'
    asset 'angular'
    asset 'angular-resource'
    asset 'angular-animate'
 end

今回はAngularJSとswiperというJavaScriptをパッケージ管理するようにしています。

そうしたら、次にrakeコマンドを実行してBowerfileの内容から必要なJavaScriptを取得するようにします。

 $ rake bower:install

次に./vender/assets/javascripts/以下をassetsのパスに追加します。
config/application.rbに以下を追記します。

config.assets.paths << Rails.root.join("vendor", "assets", "javascript", "bower_components")

assets/javascript/application.jsの中身を次のようにします。

//= require jquery
//=require angular
//=require angular-resource
//=require angular-animate

以上です。ちょっと走り書きなので、後々修正するかもしれません。