YUIDoc JavaScript Documentation Tutorial GruntJS

Posted by robert | Filed under JavaScript

Wow, I am totally impressed with YUIDoc and GruntJS for getting me generating JavaScript docs within 5 minutes. Plus the default template/theme is pretty nice but I am still going to see if I can get the GreenSock JavaScript API Docs look.

In this YUIDoc JavaScript Documentation Tutorial I will be using the GruntJS YUIDoc Plugin to generate the JavaScript Docs.

Grunt JS Setup

If you have never used GruntJS before you will need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial.

Now download the example files below and navigate with Terminal or the Command Prompt to the “_build” folder and type in:

npm install

On a Mac you may need to type:

sudo npm install

Basically what “npm install” is doing is looking for a “package.json” file and checks the “devDependencies”. NodeJS will download and install the necessary files for your GruntJS setup. Here is our package file:

{
    "name": "YUI-Docs",
    "version": "0.1.0",
    "description": "This is the description.",
    "url": "http://www.test.com",
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-yuidoc": "*"
    }
}

Luckily EaselJS uses YUIDoc and I could run a test with JavaScript classes already committed. Below is how the Gruntfile is setup.

// Metadata.
meta: {
    basePath: '../',
    srcPath: '../easeljs/',
    docsPath: '../docs/',
    deployPath: '../deploy/'
},

// Task configuration.
yuidoc: {
    compile: {
        name: '<%= pkg.name %>',
        description: '<%= pkg.description %>',
        version: '<%= pkg.version %>',
        url: '<%= pkg.homepage %>',
        options: {
            paths: '<%= meta.srcPath %>',
            outdir: '<%= meta.docsPath %>',
            themedir: '',
            exclude: ''
        }
    }
}

Now all we have to do is type the command below and it will generate the JavaScript documents for us.

grunt yuidoc

If you want to get a good overview of YUIDoc check out Documenting JavaScript with YUIDoc. Also it seems YUIDoc is not just for JavaScript Documenting before all languages.


Download the examples files to see the outputted docs.

Comments (3) | May 15th, 2013

3 Responses to “YUIDoc JavaScript Documentation Tutorial GruntJS”

  1. haya Says:
    September 5, 2013 at 9:29 am

    Hi thank you for the great tutorial that I’ve never seen before ..

    I have followed all the steps but I faced an error at the last step !

    see the following pic please :

    http://s13.postimg.org/x4x01ogef/error.png

    Can you advice me please ?

    Reply
    • haya Says:
      September 5, 2013 at 4:11 pm

      I did it .. :)

      the only problem was in the Gruntfile :) I changed the source path and know everything is ok :)

      Thanks a lot once again for the best tutorial in YUIDoc ………

      Reply
  2. Grunt系列(三)——自动生成API文档(yuidoc) | Benjamin Says:
    June 3, 2014 at 1:04 am

    […] https://codebelt.github.io/blog/javascript/yuidoc-javascript-documentation-tutorial-gruntjs/ […]

    Reply

Leave a Reply