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

Question

I am using the yoman spine generator and I ran this:

bower install backbone.localStorage -S 

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

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

Is there any way to set <script> tags automatically. I thought part of the benefit of the conversation was not to figure out in which order to include your scripts?

Answer 1

Just run

 grunt bowerInstall 

after installing bower

Answer 2

You can use wiredep to embed dependencies in your HTML code from the gazebo. This is the approach used by the angular generator when running 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}}">' }); 

Answer 3

Bower will not add support for a specific feature like this, but soon you will be able to specify the action to take after installing the "bower install" new package. This will be called "postinstall", similar to npm.

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

Answer 4

Use --save

 bower install --save <YOUR_PACKAGE> 

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

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