Toro_Unit

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

Written by

Toro_Unit

in

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が記述されていないものもだめだったりします。まぁ、主要なライブラリは結構ちゃんと動くので。。。。。

More posts