grunt-wiredep 和 Jade 模板

Question

我成功地使用了grunt-wiredep包将bower组件注入到我的视图标记中，现在我正在将视图从HTML转换为Jade。然而，当我运行我的构建脚本时，与以前使用HTML时注入的bower脚本不同，它们没有被注入到页面中。

我已经将src参数改为引用index.jade而不是index.html。有什么想法为什么注入不起作用吗？

- Simon Robb

---

请在您的Gruntfile中添加当前配置，否则我们无法提供真正的帮助。 - Craig

Answer 1

我曾经遇到过类似的问题，看着正则表达式并不清楚该注入什么。因此，我在这里分享我的解决方案，希望能帮助其他遇到同样问题的人。

在 jade 文件中，你需要添加：

  // bower:js
  // endbower

而不是：

<!-- bower:css --> <!-- endbower -->

对于其他文件扩展名，请在wiredep的github测试文件夹中搜索。

- eenagy

---

这是一个很好的注意点@nane。另一个相关的问题是，如果您的bower/inject任务正在运行在之前任务编译的Jade文件上，Jade会将// bower:js转换为<!-- bower:js-->（没有尾随空格），这个正则表达式无法匹配。在您的Jade文件中使用HTML注释来解决这个问题。 - Simon Robb

Answer 2

确保您正在运行最新版本的wiredep 1.8.5，该版本添加了对Jade的支持。

查看文档以及主自述文件，其中提供了更多选项。

使用您自己的视图结构更新以下内容。

wiredep: {

  target: {

    // Point to the files that should be updated when
    // you run `grunt wiredep`
    src: [
      'app/views/**/*.html',   // .html support...
      'app/views/**/*.jade',   // .jade support...
      'app/styles/main.scss',  // .scss & .sass support...
      'app/config.yml'         // and .yml & .yaml support out of the box!
    ],

    // Optional:
    // ---------
    options: {
      cwd: '',
      dependencies: true,
      devDependencies: false,
      exclude: [],
      fileTypes: {},
      ignorePath: '',
      overrides: {}
    }

  }

}

- Craig