Setup an Eclipse Run External Tool Configuration for Grunt

I use Eclipse along with the Aptana plugin to develop web applications and have been for a long time. I started using Eclipse because I loved the fact that it provides a full feature Integrated Development Environment (IDE) framework that, through the use of plugins, supports multiple programing languages. At the time I started using it I wanted to learn one IDE that would fulfill developing in multiple languages. To that extent, Eclipse has lived up to it. I have used it to develop Java, Perl, Javascript, CSS, HTML, BrightScript (for my Roku) and will, very soon, use it to develop with Rails. I have tried other editors, like Sublime Text and Brackets, but keep coming back to Eclipse, mostly for the convenience that it already “has it all” and the fact that I’m comfortable using it.

In a web project that I started a few months ago, I wanted to learn how to use Grunt, since it seems like it is now the standard javascript build tool. I have been using Ant for my web builds (copy, search replace, concatenate, minify, deploy, etc), and did so by creating run configurations in Eclipse so that running the build was just a click away. Setting a Run configuration for Grunt was a little more challenging, since Eclipse does not have native support for it.  The instructions below assume that Node and Grunt are already installed and were performed with Eclipse v4.2.2 on a Windows 7 machine.

Setup a Run External Tool Configuration for Grunt

1. From the Eclipse IDE, click on Run > External Tools > External Tools Configuration… The External Tools Configuration dialog will be displayed.
2. Under Location, enter the path to the Window cmd.exe file: c:\Windows\System32\cmd.exe
3. Under Working Directory, enter the location for the root of the project.
   In my case, I wanted to use the configuration on multiple projects, and thus opted to use the Eclipse environment variable ${project_loc} which points to the current project of the file that is in focus within the editor.  So if I switch over to another project in eclipse and run this same taks, it will run that project’s Gruntfile.js.
4. Under Arguments, enter: /c grunt –no-color ${string_prompt:Enter Grunt Target (build, deploy, watch):build} & exit
   Let’s break down that this argument does:
   • /c – tells the cmd.exe program to run a command and then exit (source)
   • grunt --no-color  – will run grunt with no colors on the output. I found that the Eclipse Console does not recognize color and thus using --no-color will suppress the weird characters that are emitted
   • ${string_prompt:Enter Grunt Target (build, deploy, watch):build} – will prompt the user for the Grunt target(s) to run. Default, in my example, is build
   • & exit – will ensure we exit the command program
5. Click on the Environment tab and define a new environment variable called Path that contains at least 3 locations (folder): a) nodejs root folder, b) nodejs NPM folder and c) the Windows System32 folder. These values are delimetered by a semicolon and should looks like the following:
   • Name: Path
   • Value: DRIVE_AND_PATH_TO\nodejs\;DRIVE_AND_PATH_TO\nodejs\node_modules\npm;C:\Windows\System32;%Path%Ensure you replace the ‘DRIVE_AND_PATH_TO’ with the actual value on your system
6. Give your new configuration a name and save it.

That’s it. You now have a Run configuration in eclipse that will run the current project’s Gruntfile.js prompting you for the Grunt target.