The New Way to Create Jquery Plugins Using Grunt & QUnit

     This is my take on the Jquery basic documentation for creating a plugin. There are a lot of new ways to create a jquery plugin and even more frameworks to replace jquery altogether. However I found myself at that point where the scope of the project was limited in a framework but had large enough components that could separated into plugins. I've removed all the business logic and now just want to create a very scalable plugin.

Example Project & Setup
   With my Jquery Plugin, I'm using Nodejs and continuous integration to do the heavy lifting. All I'm doing is taking a selected element from the caller and determine if it already has a table. Then if it does attach data to provided url's from the developer. Simple enough but there more to it, I just simplified the explanation incase people want to skip over this part and others who are interested can just read more about the plugin on github.

Like Peanut Butter and Jelly! 

Tools & Systems

• Travis-ci
• Nodejs packages
• grunt/grunt-cli
• jshint
• qunitJs (or PhantomJs or whatever else)
• uglify
• watch (optional)
• Sauce-Labs (started but not complete)

Basic Template

/*!
 * Plugin Name - Your Name
 */
(function($) {

 $.fn.YourPlugIn = function(settings) {
 
  // default configuration
  var config = $.extend({}, {
   opt1: null
  }, settings);
 
  // main function
  function Main(e) {
  }

  // initialize every element
  this.each(function() {
   Main($(this));
  });

  return this;
 };
})(jQuery);

Alternatively 

     I could have used Jquery-Boilerplate which would have saved some time, but  I'm saving it for another project and wanted to understand some of the tools behind it.

Need Styling?

     The best approach I've seen where if  you need to include css files in your plugin make them optional and if you got the time provide styles that work best with popular css frameworks. Unless the plugin you are creating is intended to correspond with particular js or css framework, I would avoid being depended on styles in your plugin. I'm including this because I don't think its topic that comes up enough in tutorials or documentation. This might be just my personal thoughts, but I would
 limit your plugin to only take care of functionality, and be open style add-ons.  

Resources
A jQuery Plugin with Grunt & QUnit
jQuery plugins own manifest file / npm - Stack Overflow