main-bower-filesのオプション使用例をメモ

これを見れば終わり
https://github.com/ck86/main-bower-files#options

main-bower-filesとは

bowerでダウンロードしてきたjsライブラリたちへの参照をまとめて取ってくることができるgulpプラグイン。

これとgulp-concatなどを使い、複数のライブラリを一つのjsファイルにまとめ上げることができる。

オプションの例

js:gulpfile.js  gulp.src(mainBowerFiles({debugging:true,checkExistence:true}))
        .pipe(concat('app.js'))
        .pipe(jsmin())
        .pipe(gulp.dest('./app/scripts'));

debugging

gulpを実行中、プラグインがどんな処理をしてるか表示してくれる。

checkExistence

bower_componentsフォルダとかの一覧からプラグインファイルがちゃんと存在しているか確認し、見つけられなかったらエラーを吐いてくれる。

これを指定しないと、プラグインファイルが見つからなくても成功したかのような感じになる。でもプラグインファイルは見つかってないのでdest先のapp.jsにはプラグインファイルが含まれておらず、ブラウザでウェブアプリを起動するとエラーをだす。いやいや、bower_componentsにはたしかにあるんだけどなあ、なんでだろう。。と困る。

私も↑で困ってました。

なので、checkExistenceはオススメ。

Overrides Option

なぜbower_componentsには該当ライブラリのフォルダが存在しているのに、checkExistenceで落ちるのか。

ディレクトリ構成が独自だったりするのが大抵の原因。のはず。

なので、この○○というプラグインのmainファイルはここにあるよ、とどこかで明記する必要があります。

ここに書いてることが全てなんですが、最初見たときよく分からなかった。

bower.jsonにcheckExistenceで落ちたプラグインのmainファイルの居場所を上書きしてやればOKです。

たとえばmodernizr.js
bowerでダウンロードしてきたjsはdistという名前のフォルダの中に格納されてるのですが、modernizrに関してはmodernizrという名前のディレクトリ直下に存在しています。

なので、main-bower-filesが見つけられなくてエラーを吐くのです。

Error: Main property of package "modernizr" is missing.

こんな感じに。

じゃあ、どうすればいいか。
bower.jsonを下記を追記すればOK

bower.json

  "overrides": {
    "modernizr": {
      "main": "modernizr.js"
    }
  }

これでmodernizr.jsの位置を上書き指定しました。
この状態でもう一度gulpを実行するとエラーを吐かずに終了するはず。