sample app.

how to get started with grunt-wiredep.

what this is.

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:


    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!

Fork me on GitHub