
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
grunt-bower-install
Advanced tools
Inject your Bower dependencies right into your HTML from Grunt.
Inject your Bower dependencies right into your HTML from Grunt.
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.
*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 -->
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.
A simple sample apple: website | github
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.
Copyright (c) 2014 Stephen Sawchuk Licensed under the MIT license.
FAQs
Inject your Bower dependencies right into your HTML from Grunt.
The npm package grunt-bower-install receives a total of 1,108 weekly downloads. As such, grunt-bower-install popularity was classified as popular.
We found that grunt-bower-install demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.