RailsアプリのJS外部ライブラリをbower管理にして、CircleCIがFailして泣きそうになった件・・

久しぶりのブログ更新・・

最近がんばってRailsのアプリ課題を進めているので、ブログの更新が滞っています・・

途中見つけたTipsはQiitaに書いてるんだけど、今回のはまだ生煮えなのでブログの方に書いてみる。。

bower で JS のライブラリ管理

Railsのプロジェクトで、jsライブラリいれよ〜と思った時、zip ダウンロードして vendor/assets に手動コピー、展開・・って流れがイヤだな〜と思って、以前調べていた手順書を元に、Railsプロジェクト内のJSをbower管理にしてみた。

↓自らの軌跡が役立って嬉しい・・

qiita.com

Bowerfileこんな感じ

asset 'bootstrap-tagsinput'

bootstrap で良い感じにタグをスタイルしてくれるライブラリを入れてみた。 こいつと一緒にjQueryも vendor/assets の方に入ったので、邪魔になるといかんと思いgemで入ってた方のjqueryを消す。

Gemfileこんな感じ

- gem 'jquery-rails'  # こっち消した
+ gem 'bower-rails'  # こっち追加した

これで bundle update と ./bin/rails g bower_rails:initialize で初期設定完了。

ローカルでは動いた・・問題はそのあと・・

ここまでは特にハマりポイントもなく、順調に進む。 （１０ヶ月くらい前の自分が一度ハマった沼だからね・・）

ローカルでは動作したので、githubにプッシュ！

・・・したらCircleCIがコケた；；

うわぁん。。（そう、前回はgithub + CircleCIまでやってません）

こんなエラー

$ bundle exec rake assets:precompile

rake aborted!
Sprockets::FileNotFound: couldn't find file 'jquery' with type 'application/javascript'
/home/ubuntu/micro-sof/app/assets/javascripts/application.js:3

jQueryないって・・・いわれてる気がする・・・

circle.ymlの設定？？

（結局関係なかった）

vendor/assets/bower_components 以下のファイルをリポジトリに突っ込んでなかったので、CircleCIでもnpmやらbowerやらの動作が必要なのでは・・・？と考え、インストールしてくれるであろう設定を付け加えてみた。。

付け足したのはpreのとこ。

circle.yml

 dependencies:
   pre:
    - npm install & npm install bower -g
   post:
     - bundle exec rake assets:precompile

しかし、解決せず；；

（ここまで関係なかったとこ）

解決策

ふと思い立って、 bower がインストールできなくても、 bower_components の読み込み終わってれば jQuery あるんじゃ・・？と

.gitignoreに付け加えてた、 bower_components 以下無視を削除して、大量のファイル達もコミット！

したら動きました・・・

node_componentsとか、それ系の「ダウンロード＆インストールするだけ」のファイルは、git commitしない、ってうろ覚えてた記憶があるんだが・・・・

bower_components はコミットしといた方がいいのかな・・・？

とりあえず、解決！

この辺の疑問点とかもスッキリわかったら、Qiitaにちゃんとした記事書こっと。

追記（2016/04/05）

やっぱりcircle.ymlの指定だけで解決できた・・・

半年後別のプロジェクトで同じ問題にぶち当たる。 ローカル環境では動くけど、CircleCI上で動かすとテストがコケる；；

Failure/Error: #= require bootstrap-sass/assets/javascripts/bootstrap/alert
     
ActionView::Template::Error:
couldn't find file 'bootstrap-sass/assets/javascripts/bootstrap/alert' with type 'application/javascript'

このプロジェクトもbowerでjs系のライブラリを入れてて、 bootstrap/sass がないよってエラー

circle.ymlに

test:
  pre:
    - bower install

を追記したら普通にインストールしてくれた・・・

参考： Deploying Grunt and Bower from CircleCI to Heroku with Node.js | Sebastiaan Deckers