角度图：grunt-angular-architecture-graph 和 grunt-angular-modules-graph答案

【问题标题】：Angular graphs: grunt-angular-architecture-graph and grunt-angular-modules-graph角度图：grunt-angular-architecture-graph 和 grunt-angular-modules-graph
【发布时间】：2018-06-29 19:38:57
【问题描述】：

我想在 StackMEAN 中为我当前的项目做一个 Angular 图，我找到了这个解决方案：

https://www.npmjs.com/package/grunt-angular-modules-graph
https://www.npmjs.com/package/grunt-angular-architecture-graph

但是，我不明白它是如何工作的，以及如何正确配置它。

Gruntfile.js 是什么？是我的 node_modules/grunt-angular-architecture-graph 中的 Gruntfile.js 吗？或其他？我不确定如何修改该文件：

grunt.initConfig({
  'modules-graph': {
    options: {
      // Task-specific options go here. 
    },
    your_target: {
      files: {
        'destination-file.dot': ['src/*.js']
      }
    },
  },
});

destination-file.dot 到底是什么？它位于哪里？什么是 ['src/*.js']？是我的代码源吗？如果我将源放入文件夹会怎样？

另一方面，我不知道如何运行 Grunt 任务，或者它们是否是当我执行“npm install”时自动完成。

另外，有没有更容易做角图的解决方案？

【问题讨论】：

您好，请解释一下究竟有什么不清楚的地方可以更好地得到社区的帮助。你对这些文件有哪些不了解的地方？
嗨！我将在问题中添加更多细节。 :-)

标签： angularjs angular mean-stack meanjs mean.io

【解决方案1】：

首先，我不知道您是否真的在使用 MEAN.JS 或其他平均堆栈项目。如果您使用的是最新的 MEAN.JS，我相信它现在只使用 Gulp 而不是 Grunt。不管怎样，如果您在项目根目录中看到一个名为 gruntfile.js 的文件，那么您就可以开始了。

由于grunt-angular-modules-graph 建议改用grunt-angular-architecture-graph，我将给出一些相关说明。

如grunt-angular-architecture-graph 文档中所述，您只需在项目的gruntfile.js 文件中使用以下行启用其任务：

grunt.loadNpmTasks('grunt-angular-architecture-graph');

然后添加以下代码块，您必须在其中设置所有 js 文件（与 Angular 相关）的路径：

angular_architecture_graph: {
    diagram: {
        files: {
            // "PATH/TO/OUTPUT/FILES": ["PATH/TO/YOUR/FILES/*.js"]
            "architecture": [
                "<%= projectConfig.app %>/<%= projectConfig.project %>/**/*.js"
            ]
        }
    }
}

然后你要注册任务：

grunt.registerTask('diagram', ['angular_architecture_graph']);

完成此配置后，您可以使用 Grunt 运行任务，方法是转到项目根目录（您的 gruntfile.js 所在的位置）并在控制台中执行以下命令：

grunt diagram

如果一切设置正确，则应该执行任务。

关于 Grunt 以及如何创建和注册任务的更多信息，我建议阅读官方Grunt documentation。

【讨论】：