Quickly test drive the creation of a Grunt plugin. Part 3.

Code from screencast and tutorial is available on Github. The screencast has more detail and explanation than this tutorial.

Continuing from Part 2 and finishing up

In Part 2, I implemented a template to render the reload.js file that properly referenced reload.html. In this latest installment we will finish and publish the plugin.

We have a problem with the way the reload.js.tpl file is being read. The path tasks/reload.js.tpl works fine when locally developing this plugin but how about when it is included in another extension project. The tasks/reload.js.tpl path is relative to the Gruntfile so this will fail when running a grunt task from a project with another Gruntfile. We need a way to generate the absolute path to tasks/reload.js.tpl. To generate an absolute path to tasks/reload.js.tpl let's tap into Nodejs' path.resolve.

Edit tasks/crx_auto_load.js adding the code within the gray highlighted sections:

Run the tests again to make sure we're green.

The reload.js file only needs to be created on the first run. Add the highlighted code to tasks/crx_auto_load.js.

Run the tests again and we are still green.

Now it is time to publish the plugin as a NPM package.

Write an informative README

Before publishing as a NPM package create a new Github repo and push to it. The Yeoman gruntplugin generator provides a nice .gitignore so you can just do:

# For example
$ git init
$ git add .
$ git commit -am "Initial commit"
$ git remote add origin git@github.com:minimul/grunt-crx-auto-reload.git
$ git push origin master

Now let's publish the plugin. If you don't have one, create a new NPM account.

$ npm adduser
Username: minimul
Password: *******
Email: (this IS public) christian@minimul.com
npm http PUT https://registry.npmjs.org/-/user/org.couchdb.user:minimul
npm http 201 https://registry.npmjs.org/-/user/org.couchdb.user:minimul
$ npm publish
npm http PUT https://registry.npmjs.org/grunt-crx-auto-reload
npm http 201 https://registry.npmjs.org/grunt-crx-auto-reload
+ grunt-crx-auto-reload@0.0.1

That's it, the Grunt plugin is now live at npmjs.org.

How about updating the plugin? How do I update the NPM package?

Aftering updating the plugin you must bump the version number in package.json and then issue another npm publish. Be sure to follow semantic versioning.

Conclusion

Yeah, it wasn't exactly rocket science but it should save you a bunch of time getting a new Grunt plugin off the ground if you are new to the ecosystem. Remember to watch the screencasts if want more details and commentary. .

Pushed on 03/26/2014 by Christian