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:

• Nerds
• Dorks
• Geeks

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

1. Download as a zip.
2. Clone it: $ git clone https://github.com/mhulse/grunt-js-boiler.git.
3. Fork it and clone: $ git clone [email protected]:USERNAME/grunt-js-boiler.git.
4. Just grab the relevant JS (uglified) and CSS (see “Styling” notes below) files.
5. 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:

1. 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.

1. 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.

Links

Related repositories:

1. Mr. Bigglesworth
2. jQuery Harmonia
3. jQuery Kerplop!

In the wild:

This code was originally developed for Foo Bar.

Other boilerplate …

… can be found here.