X

Geertjan's Blog

  • July 25, 2014

Grunting in NetBeans IDE

Geertjan Wielenga
Product Manager

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:

Join the discussion

Comments ( 6 )
  • guest Friday, July 25, 2014

    That is so so so awesome! Thank you!


  • Matt Trousdale Tuesday, January 6, 2015

    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


  • guest Thursday, March 19, 2015

    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.


  • Geertjan Thursday, March 19, 2015

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


  • azPHPguru Friday, March 20, 2015

    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.


  • guest Friday, October 28, 2016

    Just what I needed. thx a lot


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.