grunt-bower-install 将 bower_components 链接到当前目录

Question

我最近使用 Yeoman Angular 生成器和 Grunt 和 Bower 开始了一个新项目。

每当 grunt 构建我的应用程序时，grunt-bower-install 都会在 index.html 文件中重新生成指向我的 bower_components 的所有链接。

无论出于何种原因，这些资产都链接到当前目录而不是根目录，因此当我导航到超过一层深度的新 URL 时，我的所有依赖项都会中断。

如何使组件链接到根目录而不是当前目录？

当前结果：

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

想要的结果：

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

Gruntfile：

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

Answer 1

我在 yo 1.1.2 遇到了同样的问题，这就是我解决问题的方法，在 Gruntfile.js 中，在wiredep 任务中添加 fileTypes 选项：

// 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}}" />'
        }
      }
    }
  }
},