Jeff Lembeck learns a code or two

Serious code business!

How Do I Release My Own Grunt Plugin?

Background

By this time, if you work with JavaScript at all, you've likely heard about Grunt. Grunt has become the go to "build tool" and task runner for JS projects. It's used for projects backend and frontend alike and has a plethora of useful plugins that are easy to install and use. They cover everything from deleting files to compiling your sass files; you can even find something that can replace your icon solution by doing some awesome SVG magic.

Come up with a thing you need

If you're anything like me, doing anything twice is excruciating. Automation is wonderful and is forever, so let's take advantage of it. Maybe you've got a part of your build system where you want to use pngcrush to compress those image files down to the smallest they can be, and you're perfectly ok writing a node wrapper for the binary. Awesome. Let's turn this thing into a Grunt plugin.

Scaffolding

Death Star

For scaffolding the best (only?) tool out there is grunt-init

Grunt Init Page

To get grunt-init running, it's as easy as using npm install

npm install -g grunt-init

Grunt Init running in terminal

Then you just need to make folder for your grunt-init templates. You can do this by going to your home directory, and creating a hidden folder called .grunt-init.

$ mkdir .grunt-init

You then just need to clone the templates you want to use into that folder. The most commonly used templates are available here.

They even have instructions on the template pages for this.

Instructions for how to install grunt-init node

You want the Gruntfile one though, so you can run this to install (on Unix systems): git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

Now, you can make that project!

$ mkdir grunt-pngcrush
$ cd !$
$ grunt-init gruntplugin

Grunt-init will ask you a set of questions about the project, for naming/testing/publishing purposes. You can just hit enter if you want take the suggested answer.

Gif of running the code to create the scaffolded project

Now, let's make sure it worked!

$ npm install
$ grunt

Passing tests in the terminal

Looks great!

Git To It

$ git init
$ git add .gitignore
$ git ci -m "Initial commit"
$ git add --all
$ git ci -m "Scaffolding!"

Using git to keep track of your things during this whole process is important. I suggest making your first commit your .gitignore file. That way, if you messed something up during scaffolding, you can revert everything going back to the .gitignore. Believe me, this is recommended.

Testing!

Let's talk about tests. I used to tell new developers at a company I once worked that handing over code without attached tests is like telling them to screw off and that your time is more important than theirs. I'm obviously into testing things. Your plugin should be no exception. Here's the thing though, you likely won't be writing a lot of small and easy to maintain functions for your task. It will likely be a glued together set of a few testable functions that are part of a library where you've already written said tests.

For this circumstance, I tend to use a couple of integration tests posed at unit tests. Luckily, the gruntplugin scaffolding already gave us some examples! Pop into the tests to check it out.

When you have looked those over, figure out what you're going to do, and maybe written a test or two because TDD is amazing, hack away! In my case, the file where the magic is happening is in "tasks/pngcrush.js." Yours should be somewhere similar.

Once you have your tests written and everything working swimmingly, go ahead and test the package by creating a fake project in another folder, then running npm install on this folder.

$ cd ..
$ mkdir test-grunt-pngcrush
$ cd !$
$ npm install ../grunt-pngcrush/

If this installs for you and runs from your other directory, it's time to publish this thing to NPM!

Publishing to NPM!

First thing's first, create an account at https://npmjs.org.

Next up, set up the account on your machine.

$ npm adduser

Now follow the prompts.

Time to publish!

$ npm publish

And you're done! Tell everybody about it! Freak out a little bit! Your code is on the internet! You can find more details for publishing here.

Back to Blog