Angular graphs: grunt-angular-architecture-graph and grunt-angular-modules-graph

Question

I wanted to do an Angular graph for my current project in StackMEAN, and I found this solutions:

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

But, I don't understand how it works, and how I can configured it correctly.

Which is the Gruntfile.js? It's the Gruntfile.js that is inside my node_modules/grunt-angular-architecture-graph? Or another? I'm not sure about how to modificated that file:

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

What is exactly destination-file.dot? Where is it located? And what is ['src/*.js']? Is it my code source? What happens if I got my source into folders?

In the other hand, I don't know how to run Grunt task, or if they are automatically done when I do "npm install".

Also, is there solution more easy to do a Angular graph?

Answer 1

First of all I don't know if you're really using MEAN.JS, or another mean stack project. If you're using the latest MEAN.JS I believe it now uses only Gulp instead of Grunt. Eitherway if you see a file named gruntfile.js in your project root directory, then you're good to go.

Since grunt-angular-modules-graph advises to use grunt-angular-architecture-graph instead, I'll give some instructions regarding it.

As stated in grunt-angular-architecture-graph docs, you just have to enable its task in your project's gruntfile.js file with this line:

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

Then add the following code block, where you must set the path for all your js files (related with Angular):

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

Then you have to register the task:

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

After this configuration you can use Grunt to run the task by going to your project root directory (where your gruntfile.js is located) and do the following command in the console:

grunt diagram

If everything is set correctly the task should be executed.

For more information regarding Grunt and how to create and register task, I suggest reading the official Grunt documentation.