railsでbower-railsを使おうとしたが、なかなか動かなかったので、備忘録のために書いておきます。
経緯
railsでjqueryのライブラリを使うときに、いつもrailsのgemがあるかないかで悩んでいて、たまに更新されなかったりして、大丈夫かなって不安な気持ちのまま使うのは嫌だった。
また、直接ぶち込んで管理するのもめんどくさかったので、楽な方法がないのかなと調べていたらbower-railsが見つかりました。
bowerの説明
rubyのgemを、javascriptに置き換えたもの
導入方法はBower入門(基礎編)で学ぶべし！
公式サイト
Bower
初期設定
gem "bower-rails", "~> 0.10.0"
rails g bower_rails:initialize
これで設定ファイルが出来上がります。
create Bowerfile
create config/initializers/bower_rails.rb
ここの設定で、使いたいライブラリを検索して、ファイルに記入する。
# 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で確認する。
今回は下記に記載されていた。
"main": [
"dist/sweetalert.min.js",
"dist/sweetalert.css"
],
んで、ここのdist/sweetalert.min.jsが全然読み込まれなくて苦戦しました。
答えはすごく簡単でした。
vendor/assets/bower_components以下のパスを入力するのが基本です。
//= require sweetalert/dist/sweetalert.min
sweetalert/dist/sweetalert.min←sweetalert.minが必要なのに全然分からなかった。
.jsより手前のファイル名を記入すること読み込まれます。
同様にcssも読み込むことができます。
*= require sweetalert/dist/sweetalert
プリコンパイルしているかのコマンドは下記のコマンドで確認できます。
何かが間違えていたらエラーになります。
rake assets:precompile
要は.js .cssの.より前をちゃんとかかないといけないってことだった・・・
これで快適なライブラリ生活を送りましょう。