Build and Publish Your Own Grunt Plugin

Grunt is a widespread and popular task runner for JavaScript. Its architecture is based on plugins that you can combine and configure to create a powerful build system for your web applications. The Grunt ecosystem is huge and offers hundreds of plugins to help you with tedious and repetitive tasks, such as linting, testing, minification, image processing, and so on.

I had a blast building and publishing my Grunt plugin and I’m keen to share with you the experience I’ve gained along the way. I'll show you how to build your own little Grunt plugin and publish it via the npm package manager.

The plugin we will build in this article will serve as a remedy for so-called typographic orphans — single words on the last line of a paragraph or block element — by replacing the last space with a non-breakable space. This is a quite easy task, but while implementing it, we'll touch all the relevant subjects, such as setup, best practices, configuration, testing, and publishing.

If you want to get an in-depth knowledge of Grunt's mechanics or wish to contribute to an existing plugin this article is for you. Before starting, I suggest you to take some time to have a look at the official Getting Started guide and at Etienne Margraff's article titled How to Grunt and Gulp Your Way to Workflow Automation.

The plugin that we'll build in this article is available on GitHub. For your benefit, I added tags (called step01 – step04) to the repository. If you want to follow along with the code at hand just check out the respective tag. For example the command git checkout tags/step02 mirrors the state of the code after section 2.

Continue reading %Build and Publish Your Own Grunt Plugin%

by Stephan Max via SitePoint