Grunt – Setup YUIDoc

1. Install the grunt-contrib-yuidoc as one of your your project dev dependency.

• npm install grunt-contrib-yuidoc –save-dev

2. To illustrate the example, i created /app/scriptes/human.js as follow.

/**
 * A Human with name.
 *
 * @class Human
 * @constructor
 */
function Human(name) {
  this.name = name;
}

Human.prototype = {
  constructor: Human,

  /**
   * Set the human's name.
   *
   * @method setName
   * @param {String} name The name you want to assign to the human
   */
  setName: function(name) {
    this.name = name;
  },

  /**
   * Get the human's name.
   *
   * @method getName
   * @return {String} Returns the name of the human
   */
  getName: function() {
    return this.name;
  }
}

3. Edit the Gruntfile.js and setup the YUIDoc in grunt.initConfig.

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  yuidoc: {
    compile: {
      name: '<%= pkg.name %>',
      description: '<%= pkg.description %>',
      version: '<%= pkg.version %>',
      url: '<%= pkg.homepage %>',
      options: {
        paths: './app/scripts/',
        outdir: './yuidocs/'
      }
    }
  }
});

4. Run grunt yuidoc and you could find the generated yuidoc folder in your project root.
Image may be NSFW.
Clik here to view.
 

5. Go to the yuidoc directory and open the index.html.
Image may be NSFW.
Clik here to view.
 

6. Click on the Human link on the left side bar.
Image may be NSFW.
Clik here to view.
 

7. Click on the method name or the Method tab. You Human class is well documented now!
Image may be NSFW.
Clik here to view.
 

Done =)

Reference:

• GitHub – gruntjs/grunt-contrib-yuidoc
• YUIDoc – Javascript Documentation Tool

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.