Grunt JS Boiler
A starting point for Grunt.js JavaScript projects/repositories (see also: Grunt HTML Boiler).

The example source file, source/files/jquery.worf.js, is meant to illustrate how one might use Grunt to build a jQuery plugin.

Build-generated versions, of the above example source file, can be found in worf/:

jquery.worf.js: Original source file with an added banner comment.

jquery.worf.min.js: Uglified/minified version with an added “short” banner comment.

An example demo file, index.html, can be found in demo/; this file links to worf/jquery.worf.min.js and is meant to illustrate how one might setup a demo page for their JavaScript/jQuery plugin.

The following text is boilerplate verbiage, for use in real-world projects/repositories, worded to match this repo’s code and general structure.

jQuery Worf

Nice legs, for a human.

About

In case you didn’t notice, I really like Star Trek … And yes, normally I’d put something more useful here.

Inspired by:

Demonstration

Click or scan:

Note: Resize the demo page‘s browser window to see the plugin(s) in action (Firefox 15+ users, check out Responsive Design View).

Source: jquery.worf.js | jquery.worf.min.js

Installation

Download as a zip.
Clone it: $ git clone https://github.com/mhulse/grunt-js-boiler.git.
Fork it and clone: $ git clone git@github.com:USERNAME/grunt-js-boiler.git.
Just grab the relevant JS (uglified) and CSS (see “Styling” notes below) files.
Using Bower: $ bower install https://github.com/mhulse/grunt-js-boiler.git.

Usage

Setting up Worf is simple …

Markup:

The basic markup should consist of text wrapped with an <h1> tag:

<h1>Nice Legs... for a human.</h1>

Note: If you forget to include text, the plugin will not function.

Styling:

There are no CSS requirements.

The markup can be styled as you see fit; check out the demo page for a complete working example.

JavaScript:

Put jQuery on your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

… and link to the plugin:

<script src="jquery.worf.min.js"></script>

Finally, instantiate the plugin:

<script>
	$(document).ready(function() {
		$('h1').worf()
	});
</script>

Here’s a complete example with all the available options:

$('h1').worf({
	classOn         : 'worf_on',
	foo             : 'There is no honor',
	bar             : 'in attacking the weak.',
	wrapper         : 'div',
	onInit          : function(data) { console.log(this, data) },
	onAfterInit     : function(data) { console.log(this, data) },
	onBeforeWrapper : function(data) { console.log(this, data) },
	onAfterWrapper  : function(data) { console.log(this, data) }
});

… where:

Option	Description	Default
`classOn`	Class applied when plugin initialized.	`'worf_on'`
`foo`	A string that gets output to the console.	`'There is no honor'`
`bar`	IBID	`'in attacking the weak.'`
`wrapper`	HTML element tag name use to wrap target element.	`'div'`
`onInit`	Callback on plugin initialization; "this" is the context of the current element.	`$.noop`
`onAfterInit`	Callback after plugin initialization; IBID.	`$.noop`
`onBeforeWrapper`	Callback before target element wrapped with `<div>`.	`$.noop`
`onAfterWrapper`	Callback after target element wrapped with `<div>`.	`$.noop`

Advanced:

All options can be overidden via an HTML5 data attribute named data-worf-options; the value of this attribute must be valid JSON syntax.

For example:

<h1 data-worf-options='{ "foo" : "Compared to Klingons,", "bar" : "humans are fragile creatures." }'>Nice Legs... for a human.</h1>

Note the nesting order of the single (') and double (") quotes.

All options may be defined before plugin initialization, like: $.fn.worf.defaults.XXX = 'foo'; (where XXX is name of option).

Check out the demo page for a working example of the aforementioned features.

Development

For information on how to build Worf from the original source code, visit: source/README.md.

Other boilerplate …

… can be found here.

mhulse/grunt-js-boiler