如何使用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会为您处理它。