grunt-wiredep

grunt-wiredep

Inject Bower packages into your source code with Grunt.

What is this?

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 will 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.

Getting Started

*If you are new to Grunt, you will find a lot of answers to your questions in their getting started guide.

To install the module:

npm install --save-dev grunt-wiredep

Include the task in your Gruntfile:

grunt.loadNpmTasks('grunt-wiredep');

Create a config block within your Gruntfile:

wiredep: {

  target: {

    // Point to the files that should be updated when
    // you run `grunt wiredep`
    src: [
      'app/views/**/*.html',   // .html support...
      'app/views/**/*.jade',   // .jade support...
      'app/styles/main.scss',  // .scss & .sass support...
      'app/config.yml'         // and .yml & .yaml support out of the box!
    ],

    // Optional:
    // ---------
    cwd: '',
    dependencies: true,
    devDependencies: false,
    exclude: [],
    fileTypes: {},
    ignorePath: '',
    overrides: {}
  }
}

See wiredep's readme for more options of customization, such as other file types, regex patterns, exclusions, and more.

For JavaScript dependencies, pop this in your HTML file:

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

Install a Bower component:

bower install jquery --save

Call the Grunt task:

grunt wiredep

You're in business!

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

Behind the Scenes

This plug-in uses wiredep, which takes a look at all of the components you have, then determines the best order to inject your scripts in to your HTML file.

Putting script tags that aren't managed by grunt-wiredep is not advised, as anything between <!-- bower:js --> and <!-- endbower --> will be overwritten with each command.

Examples

A simple sample apple: website | github

License

Copyright (c) 2014 Stephen Sawchuk Licensed under the MIT license.