Netbeans IDE Editor and Grunt JS

You can integrate in Netbeans Grunt so that they can be served on dedicated surfaces or via the console and here you will learn step by step how to do that.

With Grunt JS you can Converting and compressing your SASS or LESS files into CSS, although you could do that with Netbeans itself. But one of the best advantage is that you can now also compress JavaScript files, which you could not do as easily as with SASS or LESS.

The version should not matter and would have to work for almost everyone, as the Netbeans developers have provided for surfaces. Now let's get started because I do not like it myself when long texts do not stop and no material or tangible is to watch;).

My current version and where I tried it:
8.0 -  Apache Netbeans IDE 8.0
8.1 -  Apache Netbeans IDE 8.1
8.2 -  Apache Netbeans IDE 8.2 CURRENT

What's needed for Netbeans and Grunt on Windows or Mac

First, we need NetBeans, so download and install it:
 Apache Netbeans IDE

Then download and install Node.js on your system:
 Node JS

And now we need Grunt and we install grunt globally, so you can use it for other projects on your system. You do not have to visit this page unless you want more information about Grunt. We already have the Node Package Manager installed and with these we install Grunt.

 Grunt JS

To get grunt.js installed we need to first install Grunt’s command line interface (CLI) globally. Open up Windows Command Prompt or open your Mac terminal and enter the following to install it with the Node Package Manager:

You will be prompted to enter the password because we will do it with sudo and only admins will. The -g stands for global, after the installation you can now use Grunt already.

Now open NetBeans and go to Preferences -> HTML / JS -> Grunt, there you will find Grunt Path: in this field you enter the location where your Global Grunt installation is located. If you did it as described then this path should also work for you.

Save / Apply or OK and that should be it. To check if Grunt really exists in the folder, open your Finder and at the top of the tab go to "Go To" -> "Go to Folder" there you will get everything up to the /usr/local/bin folder. In the /usr/local/bin folder you should find Grunt.

Tip

After you have done the upper part and then create a new project in NetBeans, you should also have the Gruntfile.js and package.js in the "Important Files" folder. You can directly use these and the libraries will be in "npm Libraries"

Create the package.json

Now create a new project and there in root you create a file called package.json (With this you overwrite the package.json in "Important Files"), which could look like this:

 0  {  1    "name": "my-project-name",  2    "version": "0.1.0",  3    "devDependencies": {  4      "grunt": "^1.0.1",  5      "grunt-autoprefixer": "^3.x",  6      "grunt-contrib-less": "^1.4.1",  7      "grunt-contrib-uglify": "^2.1.0",  8      "grunt-contrib-watch": "^1.0.0"  9    }  10  } 

Note also that it may be that something is not working when various modules are loaded where the version, among other things with a different version does not play along. You can search  Grunt JS (github) for packages here or here for composer  Packagist for composer.json.

Create the modules and tasks

Now we'll create the Gruntfile.js we need to load the modules and make the tasks you want visible on the interface to interact with. Our Gruntfile.js might look like this to make it happen:

 0  /**  1   * GRUNT  2   *   3   * @author  Samet Tarim aka prod3v3loper  4   *  5   * @param   {type} grunt  6   * @returns {undefined}  7   */  8  module.exports = function (grunt) {  9    10      // Project configuration.  11      grunt.initConfig({  12          pkg: grunt.file.readJSON('package.json'),  13          less: {  14              dist: {  15                  options: {  16                      cleancss: true,  17                      compress: true  18                  },  19                  files: {  20                      "core/css/style.min.css": "core/less/style/style.min.less",  21                  }  22              }  23          },  24          autoprefixer: {  25              dist: {  26                  files: {  27                      'core/css/style.min.css' : 'core/css/style.min.css'  28                  }  29              }  30          },  31          uglify: {  32              dist: {  33                  files: {  34                      'core/js/_min/front.min.js': [  35                          'core/js/nav.js',  36                          'core/js/mobile.js',  37                      ]  38                  }  39              }  40          },  41          watch: {  42              js: {  43                  files: ['<%= uglify.files %>'],  44                  tasks: ['uglify']  45              },  46              less: {  47                  files: ['<%= less.files %>'],  48                  tasks: ['less']  49              },  50              css: {  51                  files: ['<%= autoprefixer.files %>'],  52                  tasks: ['autoprefixer']  53              }  54          }  55      });  56    57      // Load the plugins  58      grunt.loadNpmTasks('grunt-contrib-less');  59      grunt.loadNpmTasks('grunt-autoprefixer');  60      grunt.loadNpmTasks('grunt-contrib-uglify');  61      grunt.loadNpmTasks('grunt-contrib-watch');  62      // Default task(s).  63      grunt.registerTask('default', ['watch']);  64  }; 

Here we have 4 modules loaded and configured for LESS to compile CSS and write OOCSS. Second, we loaded Uglify to minimize our JavaScript files. Then we loaded an autoprefixer to add the prefixes for different browsers. And last but not least, we loaded a watch so that we could focus on the code in the tunnel and get everything ready for action. In addition, we have set a default tasks to easily run this fast.

NPM Install with Grunt

Now that you have created the package.json and the Gruntfile.js in the root directory of your project, you can now add the node_modules by right-clicking on the package.json, a window opens with various options, among others npm install. Click on npm install and the node_modules will be imported into your project. Of course you can also do this in the console as described below. More information about  NPM JS

Use Grunt now in NetBeans

So we did everything necessary to make NetBeans Grunt capable. After you have created a new project, you can now access the Grunt functions or the modules that you have loaded in the Gruntfile.js.

If all the paths in your Gruntfile.js are correct, the respective functions will minimize, autoprefix or even monitor them and change them immediately with watch, so make sure all the paths are relative to the Gruntfile.js.

Use Grunt in NetBeans with terminal/console

Or use Grunt via the console in NetBeans or outside of NetBeans. For use in NetBeans, open under Window -> IDE Tools -> Console and change to your directory:

And for example, enter the following:

or if you have already run npm install now use grunt and the modules

Now you should be able to grunt successfully, I hope could help you. For questions about criticism or feedback just use the comment form.