grunt-savvy-js

grunt-savvy

Document generator for stylesheets

Getting Started

This plugin requires Grunt ~0.4.5

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-savvy-js --save-dev

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

grunt.loadNpmTasks('grunt-savvy-js');

The "savvy" task

Overview

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

grunt.initConfig({
  savvy: {
    your_target: {
       options: {
            sourceFolder : 'source/scss',
            targetFolder : '../documentation/savvy',
            styleFiles : ['source/css/style1.css', 'source/css/style2.css']
       }
    },
  },
});

Options

sourceFolder

Type: String

A path to the unprocessed css files, with the documentation comments. This could be Sass, Less, Stylus or plain old Css.

This requires only on folder, and will recursively find all files within it.

targetFolder

Type: String

Path to the folder that will contain the documentation site.

styleFiles

Type: Array

Array of file paths to the post-processed css files. These files will be copied into compiledStyles folder inside the target folder and will be used to render live examples.

pattern

Type: Array Default value: '*.*'

Use this pattern to tell Savvy which files to process from the sourceFolder. By default, Savvy assumes all files in the sourceFolder are some sort of stylesheets, but sometimes there are other files in there like images, or a mix of pre-processed and post-processed files. You can target only the files you want to process by providing a pattern, for example '*.less'.

Savvy uses the Minimatch library to define the pattern. See Minimatch documentation for more details.

patternOptions

Type: Object Default value: { matchBase: true }

These are the pattern options, as defined in Minimatch documentation.

themeFolder

Type: String

Want to use your own theme? Provide a path to the folder that holds the theme files.

debug

Type: bool

When true, savvy will report its progress in the console. This is useful when the code breaks and you want to know where.

Usage Examples

This is a full example of all the available options. note that 'pattern', 'patternOptions' and 'themeFolder' are optional.

grunt.initConfig({
  savvy: {
    your_target: {
        options : {
           sourceFolder : 'source/scss',
           targetFolder : '../documentation/savvy',
           styleFiles : ['source/css/style1.css', 'source/css/style2.css'],
           pattern : '*.scss',
           patternOptions : { nocase : true, matchBase: true },
           themeFolder : 'source/docTheme'
       }
    }
  },
});