# grunt-bower-concatでbowerを超便利に使う。

- リンク: https://torounit.com/blog/grunt-bower-concat%e3%81%a7bower%e3%82%92%e8%b6%85%e4%be%bf%e5%88%a9%e3%81%ab%e4%bd%bf%e3%81%86%e3%80%82/
- 公開日: 2014-04-15T09:30:14+09:00
- 作成者: Toro\_Unit

[bower](http://bower.io/)を使ってjsをパッケージ管理したかったんです。
 でも普通に
使うと、bower_componentsから、ファイルを動かしたり、scriptタグをたくさん書いたり、
いろいろめんどくさいです。

そんなときに、[grunt-bower-concat](https://github.com/sapegin/grunt-bower-concat)
がものすごく便利です。

このタスクを回すと、bower_componentsの中のjsを取り出し、結合して一つのjsにまとめ
てくれます。
 また、その際、依存関係を解決しながら読み込み順などを設定して結合し
ます。

jsをインストールする際、

    ```decode:true
    bower install hoge
    grunt bower_concat
    ```

とするだけで、JavaScriptのインストールが完了します。scriptタグを書いたりしなくて
も大丈夫。非常にbowerが手軽に扱えます。PHPのComposerくらいお手軽につかえます。

## インストール

    ```decode:true
    npm install grunt-bower-concat --save-dev
    ```

にて、モジュールをインストール後、Gruntfileに

    ```decode:true
    bower_concat:
      all:
        dest: 'assets/js/lib.js'
        exclude: [
            'jquery',
            'modernizr'
        ]
        bowerOptions:
          relative: false
    ```

と、設定を書きます。destは、吐き出しファイル名、excludeには、除外するライブラリを
記述します。bowerOptionsは正直よくわかりません。そのほかのオプションは、[Github](https://github.com/sapegin/grunt-bower-concat)
を参照してください。

Gruntfileはこんな感じになります。
 https://gist.github.com/torounit/10652847

最新版がbowerで配布されるようなモジュールなどを扱うときは死ぬほど便利です。作成さ
れたjsをgrunt-contrib-uglifyなどで、圧縮したりするのも楽勝です。

ただ、CSSには対応していません。
 また、bower.jsonのmainが記述されていないものもだめ
だったりします。まぁ、主要なライブラリは結構ちゃんと動くので。。。。。