Friday Jul 25, 2014

Grunting in NetBeans IDE

Grunt tasks are to JavaScript what Ant targets and Maven goals are to Java.

You can "grunt" on the command line, but also directly in NetBeans IDE.

Here I'd like to take a look at where the feature set in NetBeans IDE is going with Grunt.

Let's say we've got hold of the AngularJS Seed template. Doing this is simple in NetBeans IDE via the New HTML5 Project wizard, which gives you an option to let NetBeans IDE download the AngularJS Seed template as the basis of the new application.

Once you have your application, hop over to the New File dialog and create your Grunt file:

Next, here's a handy Grunt definition that creates three tasks, for copying to a 'build' directory, for cleaning that directory, and for combining the two tasks, thanks to this article:

module.exports = function (grunt) {
        pkg: grunt.file.readJSON('package.json'),
        'Compiles all the assets and copies the files to the build directory.',
       [ 'clean', 'copy' ]

Copy the above into your Grunt file. The above means that in the 'package.json' file that is already part of the AngularJS Seed template, you need to add two new dependencies, shown in bold below:

"devDependencies": {
"karma": "~0.10",
"protractor": "~0.20.1",
"http-server": "^0.6.1",
"bower": "^1.3.1",
"shelljs": "^0.2.6",
"karma-junit-reporter": "^0.2.2",


Then right-click on the project and choose "Npm install", which is new in the upcoming NetBeans IDE 8.0.1, though the development builds are already available:

Then, also new in NetBeans IDE 8.0.1, right-click on the project and notice that you have access to the tasks via the new "Grunt Tasks" menu item:

Also, again new in NetBeans IDE 8.0.1, you can map your Grunt tasks to project commands:

Now, when you right-click your project and choose "Build", "Clean", and "Clean and Build", you automatically delegate the handling of the action to the underlying Grunt task.

The icing on the cake is that the project commands "Build", "Clean", and "Clean and Build" can be mapped to keyboard shortcuts. For example, map "Build" to a keyboard shortcut and then, when it is pressed, the related Grunt task of the currently active project will be invoked.

Grunt could almost not be integrated more snugly into NetBeans IDE. Maybe an enhancement could be to provide some predefined templates as examples of what can be done with Grunt, to really get you up and running quickly.

Related reading:


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« July 2014 »