create-jquery-plugin

create-jquery-plugin is a CLI tool for creating a ready-to-start jQuery plugin development environment with modern configurations. It will create a development environment with a pre-configured build system and you can get started immediately with your plugin development. Also, it is easily customizable that allows you to add or remove any tools or setup. The development setup will include the boilerplate project for the jQuery plugin development, pre-configured gulp tasks for JavaScript transpile, CSS/SCSS building, test/lint scripts, hot loading, example page, readme, etc.

Usage

The command will walk you through a few simple prompts and creates a ready-to-start local development setup for your new jQuery plugin.

npx create-jquery-plugin

Or, fast track with default settings, just pass your plugin name.

npx create-jquery-plugin jquery-my-plugin

This will create a directory with the your plugin name and with all the tools installed.

Features

• Easy-to-use CLI.
• CSS and SCSS templates.
• Creates ready-to-start local development environment.
• Unit testing with Jasmine and Karma.

How to start the development

To start the development process, cd to your new plugin directory and run npm start or yarn start. For example, if your new plugin is jquery-my-plugin, just run

cd jquery-my-plugin
npm start

It will open the example/index.html file with Browserify sync. You can start coding on the directory src, the example page will hot load as you make changes.

How to do unit testing

The development environment has pre-configured unit testing with Jasmine and Karma. The test scripts are under the test directory. You can add new test cases there. You can also configure the tests online on Travis CI.

To run the unit testing:

npm test

How to publish to npm

You can publish your new jQuery plugin to npm just like any other project. Just run the publish command (you should be logged in to npm)

To publish:

npm publish

Directory Structure

The project boilerplate is from https://github.com/techlab/jquery-plugin-boilerplate

jquery-my-plugin
├── examples
│   └── index.html
├── node_modules
├── src
│   ├── js
│   │   └── jquery-plugin-boilerplate.js
│   └── scss
│       └── jquery-plugin-boilerplate.scss
├── test
│   ├── test-template.html
│   └── test.js
├── .gitignore
├── .npmignore
├── CONTRIBUTING.md
├── gulpfile.js
├── karma.conf.js
├── LICENSE
├── package.json
└── README.md

Parameters

Details on the parameters and settings on the create-jquery-plugin CLI tool.

Package Name

Package Name is the only required parameter on the tool. You can provide it when tool prompts for it or you can pass as a first argument. If you pass as an argument, the tool will work as a fast track mode and will not prompt for any other settings. All other settings will be the default settings or the previous setting you have provided.

Description

It is the description of your package and it will be added to the README, package.json, and to the plugin files. You can change it any time after you start the development. Default is "Made with create-jquery-plugin".

Version

It is the version of your package and it will be added to the README, package.json, and to the plugin files. You can change it any time after you start the development. Default is "1.0.0".

Author

It is the author of your package and it will be added to the package.json, and to the plugin files. You can change it any time after you start the development. The tool will try to read it from the git if available otherwise it will be empty as default.

Repository

It is the repository URL of your package and it will be added to the package.json, and on plugin files. You can change it any time after you start the development. Default is empty.

License

It is the license of your package and it will be added to the README, package.json, and on plugin files. You can change it any time after you start the development. Default is "MIT".

Package Manager

It is the package-manager of your choice. You can choose npm or yarn. If you choose yarn, make sure you are installed yarn already. Default is npm.

Template

The plugin template to be used to setup your development environment. You can choose "JavaScript with CSS" or "JavaScript with Sass". The only differece between the two template is the later support SCSS while the first is CSS. Default is "JavaScript with CSS".

Acknowledgements

Grateful to the authors and contributers of create-react-library and create-react-app from which this project is inspired. Thankful to the jquery-plugin-boilerplate for providing the project templates. Also, thanks to the authors and contributors of the amazing Node.js tools used in this project.

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

Help us improve

create-jquery-plugin is a free and open-source project, and we are trying hard to improve the project as per the feedback from you. Please help us finding bugs or issues on this project, or give us an idea for a feature. Also, you are most welcome to improve the code, please create a pull-request on the project repository on GitHub.