gruntのbower installでtargetDirにcopyするファイルを制御


下記のサイトにあるようにgruntを使用してbower installをしている場合に、targetDirにコピーされるファイルを制御したい時のTips。

http://qiita.com/mekkoo/items/e5a1670d85726cf6c61c

bowerでtargetDirを指定して、インストール&コピーを行った際に、いくつかのJSはきちんとメインのjsファイルのみコピーされる一方、いくつかのものはディレクトリ丸ごとコピーされてしまうケースがある。その場合不要な物をwebに公開してしまう恐れがあるので、制御しておいたほうが良い。

Gruntでの指定の例

bower: {
   install: {
      options: {
         targetDir: 'js/lib',
         layout: 'byType',
         install: true,
         verbose: false,
         cleanTargetDir: true,
         cleanBowerDir: false
      }
   }
}

 


例えば、bowerで”bower jquery install –save”や”bower backbone install –save”などを行った際には、下記のようにtargetDirを指定すると、きちんと”jquery/jquery.js”と”backbone/backbone.js”が配置される。(zeptoやunderscoreも)

一方、mustacheやunderscore.stringなどきちんとbower packageでケアされていないものはディレクトリ丸ごとtargetDirに配置されてしまう。

原因を探ってみると、各ライブラリのbower用のパッケージにあるbower.jsonの中に”main”というプロパティが指定されているか否かによることが判明。
例:

  "main"          : "backbone.js",

その場合は自分のプロジェクトのbower.jsonの中に以下のような記述を足せばOK。

"exportsOverride": {
   "mustache": {
   "": "mustache.js"
   }
}

追記:複数コピーファイルを指定する場合は以下のように配列で指定すればOKです。

"exportsOverride": {
     "bootstrap": {
           "": ["dist/js/bootstrap.js", "dist/css/bootstrap.min.css"]
        }
    }