grunt-reveal-jade

A wrapper for RevealJS that allows you to write the slides in Jade

grunt-reveal-jade

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

The idea is that all you have to include is grunt-reveal-jade as a dependency, and you can simply create slides in a Jade file, livereload as you edit, and pick themes (and down the road other Reveal options) in your Gruntfile.

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:

grunt.loadNpmTasks('grunt-reveal-jade');

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

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

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

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
  • livereload: a boolean indicating whether the lr snippet script include tag included (you can also add the lr script via connect middleware to be less invassive to the build)
    • default: false
  • 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"
  • syntax: The syntax highlight css for the slideshow
    • default: "zenburn"

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.

grunt.initConfig({
  reveal: {
    mySlides: {}
  },
})

To run use grunt reveal

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.