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

daiizの自由帳

フレンチフライ トリュフ塩仕立て

Bower 導入作戦

web-components chrome-dev-editor tech

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を付記します。

bower.jsonには、他にも便利な設定項目が多くありますが、まずはこのあたりを押さえておけば良いかなと思います。

Chrome Dev Editor で Bower を使う

CDE((Chrome Dev Editor)では、ファイルパネル上でbower.jsonを含むフォルダを右クリックすると、Bower関連のメニューが表示されます。

f:id:daiiz:20141215230915p:plain

Bower InstallBower Updateをクリックすると、bower.jsonの内容に従って各種ライブラリのファイルをダウンロードしてくれます。

Bowerの導入作戦

  • 今後開発する Web Components, Custom Elements やこれらを用いたアプリにはBower管理を採用する
  • これまで開発したものについてもなるべく早くBowerに対応させる