Netbeans IDE Editor and Grunt JS

Last Updated : |  

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


Note

This material is tailored for Mac users


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

Open your terminal and enter the following to install it with the Node Package Manager:

USERNAME$ sudo npm install -g grunt-cli

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.

/usr/local/bin/grunt
NetBeans IDE Settings for Grunt

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:


// JS CODE
     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 Grunt 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:


    // JS CODE
       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



      NetBeans IDE Grunt npm install

      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.



      NetBeans IDE Grunt usage

      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:

      USERNAME$ cd /Users/USERNAME/yourproject/

      And for example, enter the following:

      USERNAME$ npm install

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

      USERNAME$ grunt uglifyNetBeans IDE Grunt usage

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

      Your Comment

      * This fields are required, email don't publish
      You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
      ?

      This field is optional
      Fill this field link your name to your website.

      Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

      I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
      tnado SEO & AMP CMS © 2019 | All Rights Reserved
      Created with tnado SEO CMS