gbi

grunt-bower-install

Inject Bower packages into your source code with Grunt.

Showing:

Popularity

Downloads/wk

3.2K

GitHub Stars

868

Maintenance

Last Commit

6yrs ago

Contributors

10

Package

Dependencies

2

License

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
use grunt-wiredep instead

Readme

grunt-bower-install

Inject your Bower dependencies right into your HTML from Grunt.

What is this?

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

Include the task in your Gruntfile:

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

Create a config block within your Gruntfile:

bowerInstall: {

  target: {

    // Point to the files that should be updated when
    // you run `grunt bower-install`
    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 bowerInstall

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-bower-install is not advised, as anything between <!-- bower:js --> and <!-- endbower --> will be overwritten with each command.

Examples

A simple sample apple: website | github

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial