Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

これを見れば終わり
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ファイルはここにあるよ、とどこかで明記する必要があります。

https://github.com/ck86/main-bower-files#overrides-options

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

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を実行するとエラーを吐かずに終了するはず。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away