** this project is a WIP **
Boilerplate a new package, page, stylesheet, module, app, whatever.. A simple, lightweight alternative to Jekyll and Assemble.
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-boil --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-boil');
Use Boil to boilerplate new files and folder structures in your project. The kind of commands you might run include:
Create a new package structure called "Components"
$ grunt boil:package:Components
Boilerplate a new "Person" module in the "Components" package
$ grunt boil:module:Person:Components
Generate the index page
$ grunt boil:index
..or the whole site
$ grunt boil:blog
In your project's Gruntfile, add a section named boil
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
boil: {
options: {
// Handblebars helpers to load
helpers: "helpers/*.js",
// Default data. Is overridden by target level options and extended by mapping and src-level options.
data: { user: "Lloyd", task: "grunt-boil" }
},
your_target: {
// standard grunt file array defining what to create
files: [
{
src: "index.hbs"
dest: "index.html",
data: {
title: "Index page",
news: [
{ title: "An event happened", "content": "etc.." }
]
}
}
]
}
}
})
Type: String
| Array
Default: []
A globbing pattern, or array of patterns specifying the filenames of handlebars helpers to be registered. Each helper module should look something like this:
module.exports = function(handlebars){
handlebars.registerHelper("myHelper", function(context, options){
// your helper code here
});
};
Type: String
| Array
Default: []
A globbing pattern, or array of patterns specifying the filenames of handlebars partials to be registered. Each partial should be a file containing markup looking something like this:
<a href="{{url}}">{{text}}</a>
The filename of the partial (minus the .hbs
extension) becomes the registered name. So, the partial with a filename of fileStats.hbs
is inserted like so:
<section>
<p>See below for the file statistics</p>
{{> fileStats}}
</section>
Type: Object
Default: {}
The data available to all src
templates.
Two properties are added to data
automatically - grunt
(giving access to grunt config, functionality etc) and args
, containing the arguments passed to the task.
You can set an args
array in data
to be used as default values in the case no args are specified:
data: {
args: [ "packsges "]
}
A set of progressively more complex examples.
This target:
empty: {
dest: "empty.txt"
}
with this command:
$ grunt boil:empty
Produces this file:
empty.txt
This target:
meanings: {
src: "default-meanings-file.txt",
dest: "meanings.txt"
}
with this command:
$ grunt boil:meanings
Produces the file meanings.txt
with the content specified in default-meanings-file.txt
.
This target:
logo: {
copy: "assets/standard-logo.png"
dest: "logo.png",
}
with this command:
$ grunt boil:logo
Simply duplicates the file specified by copy
. Useful for binary files.
This target:
grunt.initConfig({
boil: {
empty: {
create: [
"tmp/style/main.css",
"tmp/style/main.css"
]
}
}
})
with this command:
$ grunt boil:empty
Produces this output:
$ find tmp/*
tmp/empty.txt
You can pass values in from the command line to insert into your created file name or content. {{args.[0]}}
is the first arg value, {{args.[1]}}
the second etc.
grunt.initConfig({
boil: {
component: {
create: [
"tmp/{{args.[0]}}/{{args.[1]}}/main.js",
"tmp/{{args.[0]}}/{{args.[1]}}/examples/{{args.[1]}}.html"
]
}
}
})
this command:
$ grunt boil:component:components:Widget
will produce the output:
$ find tmp
tmp/components
tmp/components/Widget
tmp/components/Widget/examples
tmp/components/Widget/examples/Widget.html
tmp/components/Widget/main.js