Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »


0.0.5 • Public • Published


Use server side Jade templates to create Reveal.js slideshows using Grunt.

You can create slides in a Jade file. For example the following would create a simple RevealJS slideshow:

    h1 Slideshow
    img(src="{%= assetsDirectory %}/logo.gif", alt="logo")

    h2 Title
        code(data-trim, contenteditable).
            $.when(that(), other())

    h2 The End

There are two ways to use this NPM.

  1. The suggested way is to use grunt-init to create a project scaffolding with grunt-reveal-jade as a dependency, as well as a setup for livereload, and deployging to gh-pages.

  2. or you can simply include this NPM as a dependency and build your own project.

To get a project setup using grunt-init with grunt-reveal-jade:

  1. make sure grunt-init was installed globally using
npm install -g grunt-init
  1. load the grunt-init template for grunt-reveal-jade using:
git clone ~/.grunt-init/reveal-jade  
  1. now setup your project scaffolding using
grunt-init reveal-jade

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-reveal-jade --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


Or you can install all grunt npms using the matchdep npm and:


The "reveal" task


In your project's Gruntfile, add a section named reveal to the data object passed into grunt.initConfig().

  reveal: {
    options: {
      // Task-specific options go here.
    your_target: {
      // Target-specific file lists and/or options go here.


  • slides: the directory you will store your Jade files in.
    • default: "slides"
  • build: the directory the HTML slides we be placed into
    • default: "build"
  • temp: the directory and intermediate build is placed. This directory is created and deleted before the completion of the build task.
    • default: "temp"
  • assets: Directory that will be adding from your root to the build, for images, etc.
    • default: "assets"
  • cleanBuild: a boolean indicating whether the build directory should be deleted before a new build.
    • default: true
  • title: The title tag for the slideshow
  • description: Meta tag description for the slideshow
  • author: Author meta for the slideshow
  • theme: The Reveal theme for the slideshow
    • default: "default"
    • Available themese are in /reveal/css/theme
  • syntax: The syntax highlight css for the slideshow
    • default: "zenburn"
  • controls: true
  • progress: true
  • history: true
  • center: true
  • transition: The type of transition from slide to slide. Available possibilities are:

default/cube/page/concave/zoom/linear/none * default: default

I'll be adding more options to pass through to RevealJS. To see an example of how to hook up live reload with RevealJS see this Gruntifle.

I'll be adding a grunt-init with livereload options soon.

Usage Examples

Default Options

  reveal: {
    mySlides: {}

To run use grunt reveal

Slides example

You only have to write the individual sections. Use Jade to create the HTML that you would normally add to your RevealJS' index.html

    h1 Slide 1
    h2.fragment Subtitle!

    h2 Slide 2
        code(data-trim, contenteditable).
            alert("Syntax highlighting!");


Use Jade to create your slides.

It's good to know that a period at the end of a line is equiavalen to a pipe at the beginning of the next lines. For example, here is how to do syntax highlighting:

        code(data-trim, contenteditable).
            function linkify( selector ) {
              if( supports3DTransforms ) {

                var nodes = document.querySelectorAll( selector );

                for( var i = 0, len = nodes.length; i < len; i++ ) {
                  var node = nodes[i];

                  if( !node.className ) ) {
                    node.className += ' roll';


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • 0.0.4 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.3 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.2 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.1 2013-07-10 - Initial release




npm i grunt-reveal-jade

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability