bowerを使ってjsをパッケージ管理したかったんです。
でも普通に使うと、bower_componentsから、ファイルを動かしたり、scriptタグをたくさん書いたり、いろいろめんどくさいです。
そんなときに、grunt-bower-concatがものすごく便利です。
このタスクを回すと、bower_componentsの中のjsを取り出し、結合して一つのjsにまとめてくれます。
また、その際、依存関係を解決しながら読み込み順などを設定して結合します。
jsをインストールする際、
bower install hoge grunt bower_concat
とするだけで、JavaScriptのインストールが完了します。scriptタグを書いたりしなくても大丈夫。非常にbowerが手軽に扱えます。PHPのComposerくらいお手軽につかえます。
インストール
npm install grunt-bower-concat --save-dev
にて、モジュールをインストール後、Gruntfileに
bower_concat:
all:
dest: 'assets/js/lib.js'
exclude: [
'jquery',
'modernizr'
]
bowerOptions:
relative: false
と、設定を書きます。destは、吐き出しファイル名、excludeには、除外するライブラリを記述します。bowerOptionsは正直よくわかりません。そのほかのオプションは、Githubを参照してください。
Gruntfileはこんな感じになります。
https://gist.github.com/torounit/10652847
最新版がbowerで配布されるようなモジュールなどを扱うときは死ぬほど便利です。作成されたjsをgrunt-contrib-uglifyなどで、圧縮したりするのも楽勝です。
ただ、CSSには対応していません。
また、bower.jsonのmainが記述されていないものもだめだったりします。まぁ、主要なライブラリは結構ちゃんと動くので。。。。。