command line interface - What is the "right" way to refer to javascript dependencies installed via bower in a yeoman project HTML file? -

yeoman's quickstart , package manager guides suggest using bower manage dependencies.

they installed

app/bower_components/[component_name] 

the guide suggests inserting a

<script src="app/bower_components/[component_name]/[relevant_file.js]"></script> 

line html file.

that's fine. except if component has dependencies. bower helpfully fetches components, but, far can see, doesn't give list of them , order need inserted code. (i know list of got installed when install, , 1 dig out of json file somewhere, that's still bower's name component, not path actual file needs referenced). means that, popular component jquery-maonsonry have manually insert

<script src="bower_components/get-size/get-size.js"></script> <script src="bower_components/doc-ready/doc-ready.js"></script> <script src="bower_components/eventemitter/eventemitter.js"></script> <script src="bower_components/eventie/eventies.js"></script> <script src="bower_components/get-style-property/get-style-property.js"></script> <script src="bower_components/jquery-bridget/jquery-bridget.js"></script> <script src="bower_components/matches-selector/matches-selector.js"></script> <script src="bower_components/outlayer/outlayer.js"></script> <script src="bower_components/jquery-masonry/masonry.js"></script> 

all of had go , find relevant js file name. given these files defined in json dependencies files, , bower knows them, there way above code can autogenerated. either me put html manually, or symlink points output of watch command. i'm aware require.js might manage on behalf, there way around needing require?

i wrote tool helps this, grunt-bower-install. it's grunt plug-in works yeoman workflow. manually run grunt bower-install after change-up of bower components. (after install new one, remove one, whatever).

i tried out jquery-masonry...

$ bower install jquery-masonry --save $ grunt bower-install 

...and ended with...

<!-- bower:js --> <script src="bower_components/outlayer/item.js"></script> <script src="bower_components/get-size/get-size.js"></script> <script src="bower_components/jquery-masonry/masonry.js"></script> <!-- endbower --> 

the reason plug-in can't more helpful due each package's bower.json file not specifying main property. without knowledge, script (like mine) can't reliably detect actual package's core file.

these tools young. given free nature of bower, can register package. author has choice of not mentioning dependencies, leaving out main property, choose include needless files, , end bit of chaos. bower offers dream workflow end-users if package authors avoid these patterns. pick on these practices sooner later.

however, chaos aside, still so better couple years ago. had dig these plug-ins yourself, extract .zip file folder, , find real file wanted yourself, anyway.

so, long story short, tool grunt-bower-install can help, in end, did safest approach.

just update.

yeoman's generator-webapp includes grunt task, grunt-bower-install, out of box. so, result described above out-of-date.

the new results when using grunt-bower-install jquery-masonry

<!-- build:js scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/jquery.js"></script> <script src="bower_components/get-style-property/get-style-property.js"></script> <script src="bower_components/get-size/get-size.js"></script> <script src="bower_components/eventie/eventie.js"></script> <script src="bower_components/doc-ready/doc-ready.js"></script> <script src="bower_components/eventemitter/eventemitter.js"></script> <script src="bower_components/jquery-bridget/jquery.bridget.js"></script> <script src="bower_components/matches-selector/matches-selector.js"></script> <script src="bower_components/outlayer/item.js"></script> <script src="bower_components/outlayer/outlayer.js"></script> <script src="bower_components/jquery-masonry/masonry.js"></script> <!-- endbower -->