grunt-savvy-js v1.0.9
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'
}
}
},
});