Get a ready-to-use jQuery plugin boilerplate in less than a minute and start coding right now!
jquery-plugin-boilerplate is a grunt-init template that supply a boilerplate to develop a jQuery plugin in an easy way.
The purpose of this tool is to provide everything needed to:
- Quickly get an operating environment for developing your own jQuery plugin via grunt-init CLI.
- Ensure good coding practices (code checking and code linting with JSCS and JSHint).
- Encourage reliability and maintainability (unit testing with QUnit and Karma).
- Facilitate sharing (GitHub ready, manifest files for npm, bower and jQuery plugins registries).
In order, to use jquery-plugin-boilerplate you must have Node.js, npm and git installed on your operating system.
If you haven't already done so, install grunt-init. It's a grunt tool dedicated to projects scaffolding.
npm install -g grunt-init
Once grunt-init is installed, place the jquery-plugin-boilerplate template in the following folder .grunt-init/ of your home directory. It's recommended that you use git to clone this template into that directory, as follows.
All OS excepted Windows:
git clone https://github.com/webcoder31/jquery-plugin-boilerplate.git ~/.grunt-init/jquery-plugin-boilerplate
Windows OS:
git clone https://github.com/webcoder31/jquery-plugin-boilerplate.git %USERPROFILE%\.grunt-init\jquery-plugin-boilerplate
From now on, you will no longer need to do this again to use the scaffolding tool with the supplied template. Both will be directly available and we will see how to use them in the next topic.
At the command-line, move into an empty directory, run this command and follow the prompts.
grunt-init jquery-plugin-boilerplate
Once done, if for example you named your plugin project "myplugin" when prompted, you've got a ready-to-use project with the following basic structure:
├── .github/
│ ├── CONTRIBUTING.md ................ // Instructions for others to contribute to your plugin
│ ├── README.jpg ..................... // README illustration for your plugin
│ └── README.psd ..................... // Photoshop source file of README illustration
├── demo/
│ └── index.html ..................... // Demo page of your plugin (based on the source file)
├── dist/
│ ├── jquery.myplugin.js ............. // Distribution version of your plugin
│ └── jquery.myplugin.min.js ......... // Minified distribution version of your plugin
├── src/
│ └── jquery.myplugin.js ............. // Source file of your plugin
├── test/
│ └── spec/
│ │ └── jquery.myplugin.spec.js .... // Unit test specifications for your plugin
│ └── sandbox.js ..................... // A sandbox used to run tests
├── .editorconfig
├── .gitignore
├── .jscsrc ............................ // Coding convention rules
├── .jshintrc .......................... // Checks applied to the source code
├── .npmignore
├── bower.json ......................... // Bower package manifest
├── Gruntfile.js ....................... // Grunt tasks definitions
├── karma.conf.js ...................... // Karma configuration (used by Karma CLI only, not grunt)
├── LICENSE-XXX ........................ // License(s) file(s)
├── myplugin.jquery.json ............... // jQuery plugin package manifest
├── package.json ....................... // npm package manifest
└── README.md .......................... // README file of your plugin
Then you have to run npm install to install project dependencies. This wiil create a folder node_modules containing all required dependencies at the root of your project.
Now that you have a ready-to-use jQuery boilerplate you can start developing your own plugin and test it with the help of the following available grunt commands:
grunt buildto produce the distribution version of your plugin and the minified one.grunt testto run unit tests on the distrib version of your plugin (see QUnit).grunt lintto ensure the source code of your plugin is OK (see JSHint) and it respect coding convention (see JSCS).grunt watchto automatically verify your code is OK, build it and test it every time source or test files are modified.gruntto verify your code is OK, build it and test it.
Note: JSCS linter is configured to ensure your code follows jQuery coding conventions. For more information, see jQuery Core Style Guide.
Once your plugin is ready and you published it on GitHub, you can easily register it to npm, bower and also jQuery plugin registries. All the required files are already provided in your project.
See the following documentations to learn how:
- How to publish into npm registry
- Publishing your jQuery plugin to npm, the quick and dirty way
- Creating Bower packages
- jQuery Plugin Package Manifest Specification
Note: The jQuery Plugin Registry is in read-only mode. New plugin releases will not be processed. jQuery recommends moving to npm, using "jquery-plugin" as the keyword in your package.json. See how to publish into npm registry.
There are two ways to contribute to the jquery-plugin-boilerplate project:
- You found a bug or wish to suggest an enhancement? You can report issues or ask for improvments here.
- You want to contribute actively by providing your own feature? Please, look at the Contributing Guideline.
Check Releases for detailed changelog.
The present tool is inspired from two projects that I adapted and mixed together to meet my own needs, and finally share it.
- https://github.com/jquery-boilerplate/jquery-boilerplate
- https://github.com/gruntjs/grunt-init-jquery
Thank you very much to everyone involved in these projects and their great work.
The present tool is governed by the CeCILL-C license under French law and complies with the free software distribution rules. You may use, modify and / or redistribute it according to the terms of the CeCILL-C license issued by CEA, CNRS and INRIA at the following address: http://www.cecill.info.