如何使用 Grunt 在 index.html 中声明依赖项？

Question

我的 AngularJS 应用的结构如下：

myproj
|-- app
|    |-- index
|    |     |-- index.html
|    |     |-- index.js
|    |-- page1
|    |     |-- page1.html
|    |     |-- page2.js
|    |-- page2
|-- common
|    |-- resources
|    |     |-- page1resources.js
|    |     |-- page2resources.js

index.html 是我的主页，包含控制页面显示方式的 ui-router。为了让它工作，我必须在 index.html 中声明所有依赖项，所以我有一个包含 20 个 .js 文件和一些样式表的列表。

管理这些依赖关系很痛苦，每次创建新页面时，我都要多花两分钟左右的时间。

根据我的阅读，Grunt 似乎能够简化这项任务。但是，目前对我来说了解 Grunt 以及我可以用于此的各种任务太耗时了。

如何使用 Grunt 管理 AngularJS 应用程序中的导入和依赖项？

Answer 1

您正在寻找Grunt wiredep

Grunt 有一个很棒的实用程序，叫做wiredep，它基本上可以做你想做的事情。它会在您设置的位置查找 .js 文件，并将其注入到您的 index.html 文件中。

Gruntfile.js 中的一个简单的wiredep 配置如下：

wiredep: {

  task: {

    // 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!
    ],

    options: {
      // See wiredep's configuration documentation for the options
      // you may pass:

      // https://github.com/taptapship/wiredep#configuration
    }
  }
}

另外，您可以查看Yeoman，它为您的项目提供了 AngularJS 生成器。使用此生成器，您可以直接从 CLI 注入新的控制器、指令，而无需考虑注入它们，wiredep 会为您处理。