Can bower automatically write <script> tags into index.html?

Question

I'm using yeoman's backbone generator, and I ran this:

bower install backbone.localStorage -S

And I manually had to insert this into index.html:

<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>

Is there some way for bower to automatically insert <script> tags? I thought part of the benefit of bower was not having to figure out in which order to include your scripts?

Solution 1

Just run

grunt bowerInstall 

after bower install

Solution 2

You can use wiredep to push dependencies into your HTML code from bower. This is the approach used by generator-angular when you run yo angular:

var wiredep = require('wiredep');
wiredep({
   directory: 'app/bower_components',
   bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
   ignorePath: 'app/',
   htmlFile: 'app/index.html',
   cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
});

Solution 3

Bower won't add support for a specific function like this, but will soon allow you to specify an action to take after 'bower install'ing a new package. This will be called a "postinstall," similar to npm.

In the meantime, however, I have created a library to help with this. Since you're using yeoman, just add "grunt-bower-install" as an npm 'devDependency', then follow the instructions here: https://github.com/stephenplusplus/grunt-bower-install.

Solution 4

Use --save

bower install --save <YOUR_PACKAGE>

The --save option updates the bower.json file with dependencies. This will save you from having to manually add it to bower.json yourself. You'll see that the script section at the bottom of index.html has automatically updated.

Reference: http://yeoman.io/codelab/install-packages.html

View more solutions