Bower 導入作戦 - #daiizメモ

Web Componentsを作成していると、いろいろと読み込むファイルが大きくなり、これをそのままGitHubにアップしてしまうとCloneするときの時間がやばいことになるので、パッケージマネージャー Bower を使うことにしました。（はじめから使うべきでした。）

f:id:daiiz:20141212095841p:plain

画像出典：http://bower.io/

開発中のアプリのディレクトリの中に、利用したい他のプロジェクトのリソースなどを記述したbower.jsonを置いておけば、コマンド一発でこれらをウェブからダウンロードしてローカルに展開してくれます。GitHubで公開されているリポジトリなどを簡単に指定することができます。

ダウンロードされたリソースはすべてbower_componentsディレクトリ内に展開されます。gitでアプリの開発を管理している場合は、このフォルダを.gitignoreに登録しておくと良いかもしれません。

Bowerについての詳細は下記のページで勉強しました。とてもわかりやすいので是非参照してください。

bower.json に最低限書くと良いこと

以下のように書くと、dependenciesに記述されたリポジトリからファイルがダウンロードされ、bower_componentsフォルダ内に配置されます。

{
  "name": "My App",
  "private": true,
  "dependencies": {
    "polymerlibs": "Polymer/polymer#^0.3.5",
    "griddles-ui-card": "griddles-ui-card/griddles-ui-card#master"
  }
}

GitHubにホスティングされているリポジトリであれば、事前登録等は必要なく、上記のように書くだけで良いそうです。記入におけるルールとして、

"polymerlibs": "Polymer/polymer#^0.3.5"のように書くと、リポジトリ https://github.com/Polymer/polymerのリリースバージョン0.3.5が、polymerlibsというフォルダ名で、bower_components内にコピーされます。
最新の内容をクローンしてきたい場合には"griddles-ui-card": "griddles-ui-card/griddles-ui-card#master"のように、リポジトリ名の後に#masterを付記します。