如何在网页中包含bower组件

Question

I'm starting with bower and followed this tutorial at first. I have no problems with installing a package, but with how to use it in a static web page.

I could obviously do something like:

<script src="bower_components/module_name/module.js"></script>

for each the components I need, but it seems to me not the good way to do. So I think I am missing something which could link the page generation to my bower components.

May be there a bower component which could help me to include all packages in a bower_components directory.

Answer 1

That is one way to do it but I usually use bower in conjunction with other build tools, like grunt or gulp . Then you can use a task, like grunt-bower-task , to copy only the necessary files to a directory of your choosing.

If you are feeling really ambitious, you could leverage the bower api to roll your own build solution that extracts the "main" files into your project.

Another thing to be aware of, is that not every dependency you will want to include will implement bower's configuration properly (example: missing main attribute or bower.json file). There will also be those projects that require you to include assets (fonts, images, etc.), which bower doesn't currently solve for. In these cases, you will need to come up with a way to move the files around. I always end up having to use something like grunt-contrib-copy to get everything in it's place.