Question

我想为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究竟是什么？它在哪里？什么是[＆＃39; src / * .js＆＃39;]？这是我的代码来源吗？如果我将我的资源放入文件夹会怎样？

另一方面，我不知道如何运行Grunt任务，或者如果它们是我自动完成＆＃34; npm install＆＃34;。

此外，是否有更容易做出Angular图的解决方案？

Answer 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。

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

1 个答案: