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) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        copy:{
            build:{
                cwd:'app',
                src:['**'],
                dest:'build',
                expand:true
            }
        },
        clean:{
            build:{
                src:'build'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask(
        'build',
        '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",
"grunt-contrib-copy":"0.4.x",
"grunt-contrib-clean":"0.4.x"

},

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:

Comments:

That is so so so awesome! Thank you!

Posted by guest on July 25, 2014 at 03:35 AM PDT #

Hi,

Yes thanks for the article. Netbeans is high quality. However one thing I am struggling with, with grunt. Is to do the netbeans connection back from the browser. It opens chrome, but doesn't seem to do it with NB connection. Do you know how to do this?

Thanks
Matt

Posted by Matt Trousdale on January 06, 2015 at 03:50 AM PST #

I've got the latest NetBeans, and grunt & npm installed, and I can grunt build in the terminal for my project, but I cannot figure out why - there are no options under the project -> grunt menu item. It just says "default" or "Reload Tasks". Reload tasks seems to have no effect and default seems to call grunt with no command.

Posted by guest on March 19, 2015 at 02:38 PM PDT #

Contact me on Skype to discuss this, will save some time. My username there: geertjanwielenga

Posted by Geertjan on March 19, 2015 at 02:40 PM PDT #

Thanks to your help - we identified it was broken in the latest nightly build. Grunt integration works fine in NetBeans 8.0.2 on Yosemite.

Posted by azPHPguru on March 20, 2015 at 09:04 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

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.

Search

Archives
« April 2015
SunMonTueWedThuFriSat
   
4
5
11
12
21
22
23
24
25
26
27
28
29
30
  
       
Today