今回はbower-railsのDSL版を使ってフロントエンドのパッケージ管理を幸せにしようと思います。
そもそもBowerって何?
- Webのフロントエンド(css/js等)のパッケージ管理ツール
- Railsに依存することなく管理ができる
-
*-railsみたいにバージョンアップごとに管理する必要がなくなる
検証環境
- OS X Yosemite 10.10.4
- Ruby 2.2.2
- Rails 4.2.1
- node 0.12.2
- npm 2.7.5
準備
Git
- bower-railsで利用するパッケージ についてはgitで管理しないので
.gitignoreに下記を挿入する
vendor/assets/bower_components
Node.js
-
brew install nodeでnode.jsをインストール -
npm install -g bowerでbowerをインストール
RubyGems
-
Gemfileに以下を追加
Gemfile
group :development, :test do
gem 'bower-rails'
end
rails newした際に生成されるjquery-railsについても後からbower-railsでインストールするので削除してもOK
-
bundle install --path=vendor/bundleで当該gemをインストール
bower-railsでパッケージのインストール
今回はDSLを使う
-
rails g bower_rails:initializeでBowerfileを生成 -
Bowerfileに使用したいパッケージを以下のように記述する※ 先ほど
jquery-railsを削除した場合はjquery-ujsをBowerfileに記述しないとjquery-ujsがない状態なので色々動かなくなるよ
Bowerfile
asset 'jquery-ujs'
asset 'bootstrap-sass'
asset 'fontawesome'
-
rake bower:installを実行してBowerfile内のものをvendor/assets/bower_componentsにインストール
bower-ralisでインストールしたパッケージの有効化
-
vendor/assets/bower_components以下のパスを記述すること -
requireするコンポーネント名は小文字でなければいけないっぽい
app/assets/javascripts/application.js
//= require jquery
//= require jquery-ujs
//
//= require bootstrap-sass
// ...
//= require_tree .
app/assets/stylesheets/application.css
/*
*= require bootstrap-sass
*= require fontawesome
*
*= require_tree .
*= require_self
*/
- 有効化されなかったりエラーが出る場合は
bower_components以下のPATHを確認してみてください
DSLを使いこなす
bower-railsのDSLを使いこなすことで以下のようなことが可能になります。
- assets pathの指定
- 指定URLのリポジトリの使用
- 指定したバージョンの設定
- リポジトリ内のファイルの指定
詳しくは以下を参考にしてください。
bower-rails - Ruby DSL configuration
サンプル
GitHubにサンプルをpushしたので参考程度に。
bower-rails-dsl