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.
grunt-setup-yuidoc-1
 

5. Go to the yuidoc directory and open the index.html.
grunt-setup-yuidoc-2
 

6. Click on the Human link on the left side bar.
grunt-setup-yuidoc-3
 

7. Click on the method name or the Method tab. You Human class is well documented now!
grunt-setup-yuidoc-4
 

Done =)

Reference:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s