Railsでbower-railsを使う方法

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

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

**bowerの説明**
rubyのgemを、javascriptに置き換えたもの
導入方法は[Bower入門(基礎編)](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)で学ぶべし！

**公式サイト**
[Bower](http://bower.io/)


**初期設定**

```lang:Gemfile
gem "bower-rails", "~> 0.10.0"
```

```lang:コマンドを打つ
 rails g bower_rails:initialize
```

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

```
create  Bowerfile
create  config/initializers/bower_rails.rb
```

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

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

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

```lang:コマンドを打つ
bundle exec rake bower:install
```

```lang:今回の構成
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`で確認する。

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

```lang:vendor/assets/bower_components/sweetalert/.bower.json
  "main": [
    "dist/sweetalert.min.js",
    "dist/sweetalert.css"
  ],
```

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

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

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

```lang:application.scss
 *= require sweetalert/dist/sweetalert
```

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

```
rake assets:precompile
```

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