CODEWITHSUNDEEP
angularjsgruntjsyeomanbower
user2494292
user2494292

Reputation: 41

yeoman automated javascript package references in app/index.html

I have generated an AngularJS project with yeoman, and have the standard 'Allo, 'Allo! page working.

I then decided to add restangular to the project, so executed "bower install restangular" which correctly installed the package (bower list shows the restangular reference).

However, I expected the index.html file to automatically be update with the correct script references to restangular and its dependencies.

Am I using the wrong yeoman convention for installing additional dependencies?

Upvotes: 3

Views: 2296

Answers (3)

coreyb
coreyb

Reputation: 289

You can do it with grunt-bower-install https://github.com/stephenplusplus/grunt-bower-install . Follow his instructions like adding the config to your Gruntfile, and adding the comment block to your index.html .

Install the package you want using bower install yourpackage -S . You need the -S for it to be added to bower.json

If bower-install tells you it cannot get it automatically, go to app/bower_components/yourpackage/bower.json and add in "main": "path/to/file.js"

You can do multiple files with an array, for example:

"main": ["lib/persistence.js", "lib/persistence.store.mysql.js", "lib/persistence.sync.js"]

I also found it useful to add bower-install to the common grunt tasks so that you don't need to call grunt bower-install. Here is adding it to the grunt serve task:

grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
  return grunt.task.run(['build', 'connect:dist:keepalive']);
}

grunt.task.run([
  'bower-install',
  'clean:server',
  'concurrent:server',
  'autoprefixer',
  'connect:livereload',
  'watch'
]);

});

Upvotes: 1

Stephen
Stephen

Reputation: 5770

Adam is correct. The most reliable way to handle this is to go fishing through bower_components/your-installed-package/ for the file you want to include. Currently, Bower is not consistently being used by the package authors. More specifically, some authors specify a bower.json with "main": "path/to/file.js" defined. However, some/most don't. Without that defined, there's a limit on how much magic can happen, since it's up to a script's best guess what the main file is that should be included.

I wrote up a grunt task to try to help with this, however, that will inject a script when a package has the main property defined: https://github.com/stephenplusplus/grunt-bower-install

Instead of typing bower install jquery --save, you would say: grunt bower-install:jquery

If you give it a shot, let me know how it goes!

Upvotes: 5

Adam Simpson
Adam Simpson

Reputation: 3681

From the documentation:

The easiest approach to use a Bower package statically is to just reference the package manually from a script tag:

<script src="bower_components/modernizr/modernizr.js"></script>

Sounds like you are on the right track. Just add the script tag to your HTML.

Upvotes: 0

Related Questions