Grunt is great.
Bower is great.
And now they work great together.
grunt-wiredep is a Grunt plug-in, which finds your components and injects them directly into the HTML file you specify.
Whether you're already using Bower and Grunt, or new to both, grunt-wiredep will be easy to plug in, as you can see in the steps below.
do note: Bower is still a young little birdy, so things are changing rapidly. Authors of Bower components must follow certain conventions and best practices in order for this plug-in to be as accurate as possible. It's not a perfect world out there, so needless to say, some Bower components may not work as well as others.
To use Bower for dependencies, include a comment block in your HTML file:
<!-- bower:js -->
<!-- endbower -->
Grunt and grunt-wiredep will do the rest! Grab 'em!
npm install grunt-wiredep --save-dev
Flip over to your Gruntfile, and add in the following:
grunt.loadNpmTasks('grunt-wiredep');
grunt.initConfig({
wiredep: {
target: {
src: 'index.html' // point to your HTML file.
}
}
});
Let's say your app needed jQuery to help it reach maximum awesomeness.
Install jQuery as usual... with Bower.
bower install jquery --save
Then just go over to your terminal, and slap:
grunt wiredep
Go check out your HTML file. It should look like:
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<!-- endbower -->
There is a lot of room to make this plug-in better. If you have any problems, ideas, or solutions, please share!