sample app.


how to get started with grunt-bower-install.

what this is.


Grunt is great.

Bower is great.

And now they work great together.

grunt-bower-install 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-bower-install 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.



first.


To use Bower for dependencies, include a comment block in your HTML file:

  <!-- bower:js -->
  <!-- endbower -->
      


then.


Grunt and grunt-bower-install will do the rest! Grab 'em!

  npm install grunt-bower-install --save-dev
      


now.


Flip over to your Gruntfile, and add in the following:

  grunt.loadNpmTasks('grunt-bower-install');

  grunt.initConfig({
    bowerInstall: {
      target: {
        src: 'index.html' // point to your HTML file.
      }
    }
  });
      


so.


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 bowerInstall
      


finally.


Go check out your HTML file. It should look like:

  <!-- bower:js -->
  <script src="bower_components/jquery/jquery.js"></script>
  <!-- endbower -->
      


scene.


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