経緯

Bowerを使ってるとbower_componentsの中にjsのファイルが入っていきますが、jsだけでなく、README.mdやbower.jsonなどの余計なファイルもたくさんあって、あまり見やすいとは言えません。それが嫌で毛嫌いされているような感じがするBowerですが、ちゃんとそのあたり解決する術は残されています。

こんなときこそ、GruntJSです。GruntJSの導入はここでは触れませんので、インストールやらなんやらに関してはこちらの記事を参照。

前提

ディレクトリの構造は以下のようなものと仮定します。

注意すべきは、bower.jsonが二カ所にある点です。
これらを区別するためにライブラリのbower.json, プロジェクトのbower.jsonと呼ぶことにします。

ライブラリのbower.jsonはライブラリの依存関係を示すもので、プロジェクトのbower.jsonはプロジェクトにインストールしたライブラリを追記していくパッケージファイルです。

grunt-bower-taskのインストール

Gruntのタスクにgrunt-bower-taskというものがあります。こいつを使っていきたいので、なにはともあれ、インストールしてやりましょう。

Gruntfile.jsに記述

次にGruntfile.jsに以下のように追記していきます。

これだけで、grunt bower:installとコマンドをうつと、Bowerでインストールされたファイルがvendor内に移動するようになります。jQueryなんかで試すといいかもしれません。

しかし困った

このタスクによって移動されるファイルはライブラリのbower.json内に記述されたmainで指定されたファイルです。
しかしながら、このmainが指定されていないライブラリも少なくありません。そしてmainが記述されていないものに対して、grunt bower:installを走らせると、README.mdなどを含めた全てのファイルが移動されてしまって、全くもって、問題の解決になりません。

これを解決するためにはドキュメントのbower.jsに設定を書いてやる必要があります。

bower.jsに必要ファイルの指定

ここではmainが書かれていないライブラリの代表例としてmodernizr.jsを使って、説明します。

bower_components/modernizr/bower.jsを見てみると、

と、mainが記述されていません。
これでは全てのファイルがvendorに入ってしまいます。

それを解決するためにプロジェクトのbower.jsonに設定を書いてやりましょう。

やり方は簡単で以下を追記してやればOKです。

こうすることでvendors/modernizr/modernizr.jsだけを移動させることができます。

まとめ

ちょっと面倒くさいですが、これをしっかりやっておけば、管理がすごく楽になります。逆に、jsのライブラリを作ったときはbower.jsに忘れずにmainを書いてやらないと、自分が加害者になってしまいます。

一度設定すると、夢のように楽なフロントエンド開発が可能になるので、頑張りましょう。