読者です 読者をやめる 読者になる 読者になる

まりぴよこのブログ

日々の日記。技術ネタでまとまりきってないものの記録、伝わる文章の書き方を練習とか。

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 で良い感じにタグをスタイルしてくれるライブラリを入れてみた。 こいつと一緒にjQueryvendor/assets の方に入ったので、邪魔になるといかんと思いgemで入ってた方のjqueryを消す。

Gemfileこんな感じ

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

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

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

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

ローカルでは動作したので、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