bowerでインストールしたファイルの配置を設定するにはgrunt-bower-taskが便利
bowerのファイル構成。デフォルトのbowerでinstallするだけだと、 (デフォルトの設定で)bower_compornentにそのライブラリのディレクトリとファイルが配置されるだけ。
プロジェクトでjs/cssを使いたい場合はその中から特定のファイルを取り出して、プロジェクト用のディレクトリに配置してそこから呼び出すようにしたい。
そこでgruntとgrunt-bower-taskを使っていい感じにjs/cssファイルを配置する方法を調べてみました。
- grunt grunt
- grunt-bower-task yatskevich/grunt-bower-task
grunt-bower-task インストールと設定
grunt-bower-taskのインストールはこちらのGithubのREADMEを参考にしてください。
bower.json
とGruntfile.js
を作成し、以下のコマンドを実行することで
bowerでのインストールと指定したディレクトリへの配置を自動で行ってくれます。
$ grunt bower:install
grunt-bower-taskのoptions.layout
本題はここからで、optionのlayout
によって
targetDir以下のディレクトリ・ファイルの構成を指定ます。
マニュアルにも書いてあるのですが、
種類はbyType
、byComponent
、独自のfunction
の3つがあります。
今回bowerでインストールするライブラリはangularJSとbootstrapとし、bootstrapに依存したjqueryもインストールされます。 bower.jsonを以下のようになりました。
{ //中略 "dependencies": { "angular": "1.2.0", "bootstrap": "‾3.0.2" }, "exportsOverride":{ "angular":{ "js": "**/angular.min.js" }, "bootstrap":{ "js": "**/bootstrap.js", "css": "**/bootstrap.css" }, "jquery":{ "js": "**/jquery.js" } } }
byType
layoutをbyType
にするとbowerで設定されているtypeが親ディレクトリになり、その下に各ライブラリごとのディレクトリが作成されます。
typeは各ライブラリのbower.jsonのexportsOverride
によって設定されたものです。
byComponent
byComponent
は単純に親ディレクトリが各ライブラリのルートになり、その下に各タイプ別のディレクトリが生成され、その下にファイルが作成されます。
独自のfunction
ただ、今回やりたい構成は以下の様なjsファイルとcssファイルをまとめてディレクトリの下に置きたいというもの。
この場合はfunctionを使って独自にレイアウトを定義することができます。
Gruntfile.js
のlayoutの部分を以下の用にします。
layout : function (type, component) { if (type === 'css') { return 'css'; } else { return 'js'; } },
functionの引数のtype
は上記のtypeを、component
は各ライブラリ名になっています。いずれもString型になっています。
戻り値はtargetDir以下のディレクトリ名になります。/
(スラッシュ)を含んだ場合parseされ、ディレクトリ階層になります。
この状態で実行すると以下ようにjs/cssがまとまったフォルダ構成になります。
※exportsOverrideでうまく設定しないと、 js以外のファイルもjsディレクトリに入ってきてしまうので、トライアンドエラーでその辺は調整していきます。
まとめ
一つのコマンドを実行するだけで、js/cssファイルのダウンロード→配置までやってくれるのですごく便利ですねー。 grunt-bower-taskには他にも便利なoptionが色々とあるので是非お試しあれ。
今回作ったgithubはこちら kyohei8/grunt-bower-task_Demo · GitHub