YUIDoc JavaScript Documentation Tutorial GruntJS

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.

3 Responses to “YUIDoc JavaScript Documentation Tutorial GruntJS”

  1. 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 ?

    • 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 ………

Leave a Reply