CODEWITHSUNDEEP
javascriptgruntjsyeomanbower
Will Hitchcock
Will Hitchcock

Reputation: 4868

grunt-bower-install links bower_components to current directory

I recently started a new project using the Yeoman Angular generator with Grunt and Bower.

Whenever grunt builds my app, grunt-bower-install regenerates all of the links to my bower_components in the index.html file.

For whatever reason, those assets are linked to the current directory rather than root so when I navigate to a new Url that is more than one level deep, all of my dependencies break.

How can I make it so that the components are linked to the root directory rather than the current directory?

Current result:

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

Desired result:

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

Gruntfile:

'bower-install': {
  app: {
    html: '<%= yeoman.app %>/index.html',
    ignorePath: '<%= yeoman.app %>/'
  }
}

Upvotes: 1

Views: 933

Answers (1)

Hypnos
Hypnos

Reputation: 285

I had the same problem with yo 1.1.2, this is how I solve the problem, in Gruntfile.js, add the fileTypes option in wiredep task:

// Automatically inject Bower components into the app
wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath: new RegExp('^<%= yeoman.app %>/|../'),
    fileTypes: {
      html: {
        replace: {
          js: '<script src="/{{filePath}}"></script>',
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }
},

Upvotes: 3

Related Questions