GruntのbowerInstallタスクで差し込まれるJavaScriptファイルの順番

bowerInstallって便利ですよね

grunt-bower-installを使うと、bower.jsonで定義されたモジュールを自動的にHTMLファイルに反映させてくれます。すごく便利ですね。

で、ちょっと気になったのが、HTMLファイルに内容が反映される時に記述される順番です。ライブラリによっては依存関係があったりして、読み込み順序を間違えると正しく動かない可能性ってありますよね。そこで、ちょっと調べてみました。

https://github.com/stephenplusplus/grunt-wiredep

grunt-bower-installの依存先のwiredepの中（detect-dependencies.js）で優先度を決定しているっぽいです。（ソースを見た感じ）
優先度は、お互いがお互いの依存関係として登録されているかどうかを基準に判断されているようです。つまり依存されているライブラリは優先度が高くなり、上位に記述され、先に読み込まれます。なるほど、流石にインテリジェンスですね。
さらに、いくつかのライブラリ（jQueryなど）の優先度はすごく高いと決めて、それらを上位に持ってきているようですね。
それ以外については、bower.jsonの記述順序に読み込まれるようです。

ちょっと実験してみました。

"angular-sanitize": "1.2.15",
"angular-resource": "1.2.15",
"angular": "1.2.15",

だと

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>

になります。

"angular-resource": "1.2.15",
"angular-sanitize": "1.2.15",
"angular": "1.2.15",

だと

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

になります。

なるほど、普通に使う分には困ることはなさそうです。ちなみにgrunt bowerInstallを実行するたびにHTMLファイルは強制的に書き換えられてしまいますので、ちょっとだけHTMLで順序を書き換えてもすぐに上書きされてしまいます。bower.jsonを書き換えましょう。