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.External Tools Configurations Dialog
  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:External Tools Configurations - Env
    • 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.

Advertisements

34 thoughts on “Setup an Eclipse Run External Tool Configuration for Grunt

  1. I have followed same steps. but i ma getting ‘grunt’ is not recognized as an internal or external command,
    operable program or batch file.

    1. Hi Mohaideen…
      What happens when you open up a Command prompt and enter `grunt –version`? do you get the same error?
      If so, then Grunt does not seem to be installed globally.

      1. From command prompt it says v1.2.0, but from eclipse it says ‘grunt’ is not recognized as an internal or external command, operable program or batch file.
        And one more doubt where will node_modules folder be created?

      2. That’s strange. The setup runs the globally installed grunt in the context of the project root, so that is the first node_modules folder it will check for before walking the directories up.

        The fact that it does find grunt, tells me there is something up with the PATH. In the configuration, you might have to explicitly define the path of where grunt is installed. Or node for that matter.

      3. I did every thing as you mentioned above. After reading few comments in stackoverflow.com where they are mentioning that grunt is no more globally supported. so we will have to install it locally and run.

  2. Hi Paul,

    I want to run my client code which is in angular js using grunt on 9090 port while my server code is running on 8080 tomcat port, could you explain me how can I configure my client code using maven plugin/configuration in eclipse IDE so that I can run client code in eclipse.

    1. Hi Mayur.
      Unfortunately, I can’t answer your question. I’m not that familiar with Maven and your question goes well beyond what this post is about. Sorry that I can’t help.

  3. I’ve just come across this wonderful post, though is a year old. I’m starting off with Grunt and as I use primarily Eclipse I really appreciate your explanation. I’m just wondering one thing: Where do you create your Gruntfile.js ? Inside the root folder of each project you want to build with Grunt??

    1. HI Jorge. Thanks.
      Yes, the grunt file is created at the root of each project… The configuration option mentioned above (under “working directory”) points the external tool to the root of the current project you are working on and thus Grunt is executed from within that context. I guess you could manipulate that if you wanted to keep your Gruntfile.js file elsewhere, but normally the Gruntfile.js is always located at the root of the project.

      Hope this helps.

    1. I’m not sure why port 9000 would stay up. I’m assuming you are running some task that starts a server. If the tasks are coded correctly then when grunt exits all processes it spawned should be properly exited. Maybe try removing the ‘& exit’ from the command setup?
      I have not run into this, and I have projects that use both qUnit and Jasmine grunt tasks – both of which run web servers during execution. Post back if you find the solution.

  4. Hi Paul!

    Thanks for the really helpful article. Can you please guide me about configuring Grunt for Nodeclipse/Enide for Eclipse running on Mac OS Yosemite to write Express apps using Nodejs?

    I’m trying to map your tutorial to my Eclipse configuration but I’m not able to figure out native settings for the external tool configuration, etc.

    I already have the trio of Grunt, Yeoman and Bower installed with npm, Node and Homebrew as well.

    I will appreciate ANY help, thanks!

    Viraj Kulkarni

    1. Viraj,
      Not sure I can help… I don’t have Nodeclipse nor do i have a Mac, so its hard to suggest on how to get this accomplished successfully…
      Here are a few tips…
      If you get the same screen (External Tools Configuration) as the one in my screen capture above, then the ‘Location’ should probably be the shell that you are running (Bash? something like /etc/bin/bash)…
      The ‘Arguments’ will then be the command to run in that bash instance.. so instead of starting that up with /c you would start with -c followed by the argument listed above.
      Those are the two items that jump out at me that would definitely be different between windows and a POSIX type of system…

      Hope this helps.
      Paul.

  5. Hi Paul,

    Can I do this things from my own eclipse plugin. I do not want to create this configuration manually. It should be created when I create a new project.

    Is it possible to do from plugin. Is there any documentation?
    Please note that I do not know Java coding.

    1. Nilesh,
      Not sure I understand the reference to an eclipse plugin… The setup described here only needs to be done once in Eclipse… it will then be available to all projects you initiate or already have in your workspace. So its basically a one time setup – global to eclipse.

      Does that make sense?

      1. Yes. But I have created one plugin for my project which does all needed compiler setting but not this. That’s why I am asking

      2. Then I’m not sure. If you coded your plugin, then you should be able to just call grunt with a system command. That, however, is outside if my knowledge base. You probably need to post this on an Eclipse development forum.
        Sorry I can’t help. Good luck.

  6. Hi Paul, this is a great post, did you happen to do any MEAN apps through Eclipse setup, does it allow to do debugging of nodejs apps that are designed to run with grunt ? I had Eclipse with nodeclipse able to debug apps that i can run server.js with debug as, but when I clone more complex setups with grunt dont know how to invoke debugger.

    1. Hi Venkat.
      No, I have not worked with any MEAN apps. Most of my projects involve front-end development only at this time and thus I use the browser for debugging. Sorry I can’t help.

    1. Actually… I just checked the article, and it is two dashes… but the type of font being used with this wordpress template makes it look like 1. I just wrapped those instances in a code tag and it looks like you can tell them apart now.

  7. Thanks for the guide; I was struggling there for a bit on figuring out the setup. I did end up needing to remove the Environment variable you describe. With the Path variable in place, “grunt” was not being recognized as a command. Once I removed it, the system Path data took over and it started working.

    1. Thanks for the feedback Jon… I guess if you installed Grunt globally on the system, then you are correct, defining the path variable is not needed. In my case, I was running node from my thumbdrive thus I needed to define its location.
      Thanks for the feedback.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s