Building Documentation with Gulp, Docco and LiveReload

In this post I discuss how to "modernize" a Docco workflow by adding a development server with live-reload.

I'm going to tell you something very personal, and I hope you won't make fun of me. I love comments. Big chunky block comments. Small, concise inline comments. I love them all. When you're really trying to understand a code-base nothing beats well-written, extensive annotation.

Of course there are issues. Most of the time, people don't maintain comments, or they do it in a half-assed way. Some people are good developers but poor writers. Yes, there are issues, and often the sensible approach is to avoid comments altogether. But we're not going to be doing that today.

The Project

I've always been fascinated by emulators, and when Yusuke Endoh released Optcarrot, a NES emulator written in Ruby I knew I had to take a look.

For the past three months, on nights and weekends, I've been poring over the source, figuring out just how an NES emulator works. I've also been writing pretty extensive annotations.

Since I'd like to publish these annotations one day, I need a documentation generator to convert the source files into a website. Here are my criteria:

  • It should output HTML displaying both annotations and the full highlighted source code.
  • It should support markdown.
  • It shouldn't force me into any rdoc-like format.

To meet these requirements, I decided to use Docco. It bills itself as a "quick and dirty documentation generator" and was originally used to generate the documentation for underscore.

The only problem with docco is that it's a little too bare-bones. When working with other static site generators I've gotten used to niceties like built-in servers and live-reload. Fortunately for us, it's quite easy to use Gulp to add these features.

Installing the packages

Make sure you have node and npm installed. If you don't, none of the following steps will work.

Next, create your project directory and initialize a node project:

mkdir doccoblog
cd doccoblog
npm init -y

Now we're ready to install the packages we'll need:

npm install -g gulp
npm install --save gulp-docco gulp-livereload st

As you can probably guess, most of the heavy lifting in our system will be done by gulp and the gulp-docco and gulp-livereload plugins.

The directory structure

We're going to put our source files in src and the resulting HTML files in dest. There's nothing magic about these directory names. We'll configure them later. But for now, we'll create the directories and add a simple source file to src.

mkdir {src,dest}

Here's the sample source file, in src/sample.rb:

# ## Sample: this class doesn't do much.
# Here's a description about what this class may 
# or may not do. It turns out it just sets `@foo` to
@ `"bar"`
class Sample
  def initialize
    @foo = 'bar'

Configuring gulp

If you're not familiar with Gulp, it's a tool used to build static assets like JS, HTML and CSS files. Much like Ruby's rake command, Gulp doesn't do anything on its own. Instead, you have to tell it what to do by writing tasks in gulpfile.js.

Let's create a gulpfile.js and add our tasks:

var gulp = require('gulp'),
    docco = require("gulp-docco"),
    livereload = require('gulp-livereload'),
    st = require('st'),
    http = require('http');

var source = "src/*.rb"
var destination = "dest"

gulp.task('build', function() {

gulp.task('watch', ['serve'], function() {
  livereload.listen();, ['build']);

gulp.task('serve', function(done) {
    st({ path: __dirname + '/' + destination, cache: false })
  ).listen(8080, done);

As you can see, we've defined three tasks:

  • gulp build: Builds the documentation and places it in /dest
  • gulp watch: Serves the documentation at https://localhost:8080 and rebuilds it when the source files change. Also supports live-reload via browser plugin.
  • gulp serve: Serves the documentation, but doesn't build it or watch for changes.

If I run gulp watch then open my browser to https://localhost:8080/sample.html I'll see that my documentation has been built:

Sample Docs

If my browser has the livereload extension installed, changes to the source files will cause the browser to automatically refresh, meaning that I can easily check to see if my annotations look good in their rendered form.

What to do next:
  1. Try Honeybadger for FREE
    Honeybadger helps you find and fix errors before your users can even report them. Get set up in minutes and check monitoring off your to-do list.
    Start free trial
    Easy 5-minute setup — No credit card required
  2. Get the Honeybadger newsletter
    Each month we share news, best practices, and stories from the DevOps & monitoring community—exclusively for developers like you.
    author photo

    Starr Horne

    Starr Horne is a Rubyist and Chief JavaScripter at When she's not neck-deep in other people's bugs, she enjoys making furniture with traditional hand-tools, reading history and brewing beer in her garage in Seattle.

    More articles by Starr Horne
    Stop wasting time manually checking logs for errors!

    Try the only application health monitoring tool that allows you to track application errors, uptime, and cron jobs in one simple platform.

    • Know when critical errors occur, and which customers are affected.
    • Respond instantly when your systems go down.
    • Improve the health of your systems over time.
    • Fix problems before your customers can report them!

    As developers ourselves, we hated wasting time tracking down errors—so we built the system we always wanted.

    Honeybadger tracks everything you need and nothing you don't, creating one simple solution to keep your application running and error free so you can do what you do best—release new code. Try it free and see for yourself.

    Start free trial
    Simple 5-minute setup — No credit card required

    Learn more

    "We've looked at a lot of error management systems. Honeybadger is head and shoulders above the rest and somehow gets better with every new release."
    — Michael Smith, Cofounder & CTO of YvesBlue

    Honeybadger is trusted by top companies like:

    “Everyone is in love with Honeybadger ... the UI is spot on.”
    Molly Struve, Sr. Site Reliability Engineer, Netflix
    Start free trial