Railsでbower-railsを使う方法 #Rails4

railsでbower-railsを使おうとしたが、なかなか動かなかったので、備忘録のために書いておきます。

経緯
railsでjqueryのライブラリを使うときに、いつもrailsのgemがあるかないかで悩んでいて、たまに更新されなかったりして、大丈夫かなって不安な気持ちのまま使うのは嫌だった。
また、直接ぶち込んで管理するのもめんどくさかったので、楽な方法がないのかなと調べていたらbower-railsが見つかりました。

bowerの説明
rubyのgemを、javascriptに置き換えたもの
導入方法はBower入門(基礎編)で学ぶべし！

公式サイト
Bower

初期設定

Gemfile

gem "bower-rails", "~> 0.10.0"

コマンドを打つ

 rails g bower_rails:initialize

これで設定ファイルが出来上がります。

create  Bowerfile
create  config/initializers/bower_rails.rb

ここの設定で、使いたいライブラリを検索して、ファイルに記入する。

Bowerfile

# A sample Bowerfile
# Check out https://github.com/42dev/bower-rails#ruby-dsl-configuration for more options

# asset 'bootstrap'
asset 'sweetalert'　←これを追加した

コマンドを打つ

bundle exec rake bower:install

今回の構成

vendor/assets/bower_components
vendor/assets/bower_components
└── sweetalert
    ├── LICENSE
    ├── README.md
    ├── bower.json
    ├── dev
    │   ├── gulpfile-wrap-template.js
    │   ├── ie9.css
    │   ├── loader-animation.css
    │   ├── modules
    │   │   ├── default-params.js
    │   │   ├── handle-click.js
    │   │   ├── handle-dom.js
    │   │   ├── handle-key.js
    │   │   ├── handle-swal-dom.js
    │   │   ├── injected-html.js
    │   │   ├── set-params.js
    │   │   └── utils.js
    │   ├── sweetalert.es6.js
    │   └── sweetalert.scss
    ├── dist
    │   ├── sweetalert-dev.js
    │   ├── sweetalert.css
    │   └── sweetalert.min.js
    ├── example
    │   ├── example.css
    │   ├── example.scss
    │   └── images
    │       ├── logo_big.png
    │       ├── logo_big@2x.png
    │       ├── logo_small.png
    │       ├── logo_small@2x.png
    │       ├── te-logo-small.svg
    │       ├── thumbs-up.jpg
    │       ├── vs_icon.png
    │       └── vs_icon@2x.png
    ├── gulpfile.js
    ├── index.html
    ├── lib
    │   ├── modules
    │   │   ├── default-params.js
    │   │   ├── handle-click.js
    │   │   ├── handle-dom.js
    │   │   ├── handle-key.js
    │   │   ├── handle-swal-dom.js
    │   │   ├── injected-html.js
    │   │   ├── set-params.js
    │   │   └── utils.js
    │   └── sweetalert.js
    ├── package.json
    ├── sweetalert.gif
    ├── test
    │   ├── index.html
    │   └── tests.js
    └── themes
        ├── facebook
        │   ├── facebook.css
        │   └── facebook.scss
        ├── google
        │   ├── google.css
        │   └── google.scss
        └── twitter
            ├── twitter.css
            └── twitter.scss

昔はvendor/assets/bower_componentsを読み込まないため、configに読み込ませるように記載をしないといけないようだが、現在はそれがなくなったので、特に何かをする必要はないです。

読みたいファイルのパスの位置はインストールしたライブラリのbower.jsonで確認する。

今回は下記に記載されていた。

vendor/assets/bower_components/sweetalert/.bower.json

  "main": [
    "dist/sweetalert.min.js",
    "dist/sweetalert.css"
  ],

んで、ここのdist/sweetalert.min.jsが全然読み込まれなくて苦戦しました。
答えはすごく簡単でした。
vendor/assets/bower_components以下のパスを入力するのが基本です。

application.js

//= require sweetalert/dist/sweetalert.min

sweetalert/dist/sweetalert.min←sweetalert.minが必要なのに全然分からなかった。
.jsより手前のファイル名を記入すること読み込まれます。

同様にcssも読み込むことができます。

application.scss

 *= require sweetalert/dist/sweetalert

プリコンパイルしているかのコマンドは下記のコマンドで確認できます。
何かが間違えていたらエラーになります。

rake assets:precompile

要は.js .cssの.より前をちゃんとかかないといけないってことだった・・・
これで快適なライブラリ生活を送りましょう。