Go back to the main page

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.
  1. Edit tasks/crx_auto_load.js adding the code within the gray highlighted sections:
  2. Run the tests again to make sure we're green.
  3. The reload.js file only needs to be created on the first run. Add the highlighted code to tasks/crx_auto_load.js.
  4. Run the tests again and we are still green.
    Now it is time to publish the plugin as a NPM package.
  5. Write an informative README
  6. README excerpt.
  7. 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:
  8. # 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
  9. Now let's publish the plugin. If you don't have one, create a new NPM account.
  10. $ 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
  11. That's it, the Grunt plugin is now live at npmjs.org.
  12. 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.


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