Netbeans IDE Editor und Grunt

Letzte Aktualisierung : |  

Du kannst in Netbeans Grunt so integrieren dass diese über dafür vorgesehene Oberflächen bedient werden können oder auch über die Konsole und hier erfährst Du Schritt für Schritt wie man das umsetzen könnte.

Mit Grunt JS kannst Du z.B. Deine SASS oder LESS Dateien in CSS umwandeln und komprimieren, obwohl Du das auch mit Netbeans selbst machen könntest. Aber eines der Besten Vorteil ist das Du nun auch JavaScript Dateien komprimieren kannst, was Du nicht so einfach so wie bei SASS oder LESS tun könntest.

Die version sollte keine Rolle spielen und müsste fast bei allen funktionieren, da die Netbeans Entwickler dafür Oberflächen vorgesehen haben. Nun lass uns gleich loslegen da ich es selber nicht mag wenn lange texte nicht aufhören und kein Material oder greifbares zusehen ist ;).

Meine aktuelle version und bei den ich es ausprobiert habe:
8.0 -  Apache Netbeans IDE 8.0
8.1 -  Apache Netbeans IDE 8.1
8.2 -  Apache Netbeans IDE 8.2 AKTUELL



Was wird benötigt für Netbeans und Grunt


Hinweis

Dieses Material ist für Mac-Nutzer zugeschnitten


Zuerst benötigen wir NetBeans, also lade Dir NetBeans herunter und installiere es:
 Apache Netbeans IDE

Dann lade und installiere auch Node.js auf Deinem System:
 Node JS.

Und jetzt benötigen wir noch Grunt und das installieren wir auch global, damit Du es auch für andere Projekte nutzen kannst auf Deinem System. Du musst hier nicht die Seite besuchen es sei denn Du möchtest mehr Informationen zu Grunt. Wir haben bereits den Node Package Manager installiert und mit diesen installieren wir Grunt.

 Grunt JS

Öffne hierzu Dein Terminal und gebe Folgendes ein um es mit dem Node Package Manager zu installieren:

USERNAME$ sudo npm install -g grunt-cli

Du wirst aufgefordert Dein Passwort einzugeben da wir es mit sudo ausführen und das dürfen nur Administratoren. Das -g steht für global, nach der Installation kannst Du nun Grunt bereits nutzen.

Jetzt öffne NetBeans und gehe unter Preferences -> HTML/JS -> Grunt, dort findest Du Grunt Path: in diesem Feld trägst Du den Ort ein, wo sich Deine Globale Grunt Installation befindet. Wenn Du es so gemacht hast wie beschrieben dann sollte dieser Pfad auch bei Dir funktionieren.

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

Speichern/Anwenden oder auch OK und das sollte es sein. Um zu prüfen ob Grunt in dem Ordner wirklich vorhanden ist, öffne Dein Finder und oben im Reiter auf "Gehe zu" -> "Gehe zum Ordner" dort gibts Du bis zum /usr/local/bin Ordner alles ein und weiter. In dem /usr/local/bin Ordner solltest Du Grunt finden.



Tipp

Nachdem Du den oberen Teil erledigt hast und anschließend in NetBeans ein neues Projekt erstellst so sollten auch gleich die Gruntfile.js und package.js sich in der "Important Files" Ordner befinden. Du kannst direkt diese nutzen und die libraries befinden sich dann in "npm Libraries"



Erstellen der Packages

Erstelle nun ein neues Projekt und dort im root erstellst Du eine Datei namens package.json (Mit dieser überschreibst Du die package.json in "Important Files"), die wie folgt aussehen könnte:


// 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  } 

    Beachte hierbei auch, das es sein kann, das etwas nicht funktioniert wenn diverse Module geladen werden wo die version unter anderem mit einer anderen version nicht mitspielt. Du kannst hier  gruntjs (github) nach Paketen suchen oder auch hier für Composer  packagist.org für die composer.json.


    Erstellen der Grunt Module und Tasks

    Jetzt erstellen wir noch die Gruntfile.js die wir benötigen um die Module zu laden und die gewünschten Tasks auf der Oberfläche sichtbar zu machen, um mit diesen zu interagieren. Unsere Gruntfile.js könnte wie folgt aussehen um dies zu verwirklichen:


    // 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 Konfiguration  11      grunt.initConfig({  12          pkg: grunt.file.readJSON('package.json'),  13          // LESS minimieren und in CSS umwandeln  14          less: {  15              dist: {  16                  options: {  17                      cleancss: true,  18                      compress: true  19                  },  20                  files: {  21                      "core/css/style.min.css": "core/less/style/style.min.less",  22                  }  23              }  24          },  25          // JavaScript minimieren  26          uglify: {  27              dist: {  28                  files: {  29                      // Diese Datei ist minimiert, alles was hier drunter im array steht und wird in diese Datei geschrieben   30                      'core/js/_min/front.min.js': [  31                          'core/js/nav.js',  32                          'core/js/mobile.js',  33                      ]  34                  }  35              }  36          },  37          // CSS autoprefixer  38          autoprefixer: {  39              dist: {  40                  files: {  41                      'core/css/style.min.css' : 'core/css/style.min.css'  42                  }  43              }  44          },  45          // Ueberwachen und reagieren bei Aenderungen  46          watch: {  47              js: {  48                  files: ['<%= uglify.files %>'],  49                  tasks: ['uglify']  50              },  51              less: {  52                  files: ['<%= less.files %>'],  53                  tasks: ['less']  54              },  55              css: {  56                  files: ['<%= autoprefixer.files %>'],  57                  tasks: ['autoprefixer']  58              }  59          }  60      });  61    62      // Module laden  63      grunt.loadNpmTasks('grunt-contrib-less');  64      grunt.loadNpmTasks('grunt-contrib-uglify');  65      grunt.loadNpmTasks('grunt-autoprefixer');  66      grunt.loadNpmTasks('grunt-contrib-watch');  67      // Standard task(s) registrieren  68      grunt.registerTask('default', ['watch']);  69  }; 

      Hier haben wir nun 4 Module geladen und Konfiguriert für LESS um CSS zu kompilieren und OOCSS zu schreiben. Als zweites haben wir Uglify geladen um unsere JavaScript Dateien zu minimieren. Dann haben wir ein Autoprefixer geladen um die Prefixe für verschiedene Browser hinzu zu fügen. Und als letztes haben wir einen Watch geladen um auch im Tunnel so richtig sich auf den Code konzentrieren zu können und alles einsatzbereit gemacht. Zusätzlich haben wir einen default Tasks festgelegt um diesen einfach schnell auszuführen.



      NPM Install ausführen

      Nachdem Du jetzt die package.json und die Gruntfile.js im Root Verzeichnis Deines Projektes erstellt hast, kannst Du nun die node_modules hinzufügen, in dem Du auf die package.json mit der rechten Maustaste klickst, öffnet sich ein Fenster mit diversen Optionen unter anderem npm install. Klicke auf npm install und die node_modules werden in Dein Projekt importiert. Du kannst natürlich auch wie weiter unten beschrieben dies in der Konsole ausführen. Weitere Informationen zu  NPM JS.



      NetBeans IDE Grunt npm install

      Grunt in NetBeans nutzen

      So damit haben wir alles nötige getan damit NetBeans Grunt fähig ist. Nach dem Du ein neues Projekt erstellt hast, kannst Du nun so auf die Grunt Funktionen zugreifen bzw. die Module die du in der Gruntfile.js geladen hast.


      NetBeans IDE Grunt usage

      Wenn alle Pfade in Deiner Gruntfile.js stimmen werden die jeweiligen Funktionen diese minimieren, autoprefixen oder auch überwachen und sofort ändern mit watch, also achte darauf das alle Pfade sich relative zu der Gruntfile.js befinden.



      Grunt in NetBeans mit Terminal/Konsole verwenden

      Oder nutze auch Grunt über die Konsole in NetBeans oder auch außerhalb von NetBeans. Öffne für NetBeans Konsole unter Fenster -> IDE-Tools -> Konsole und wechsele in Dein Verzeichnis:

      USERNAME$ cd /Users/USERNAME/yourproject/

      Und gib zum Beispiel folgendes ein:

      USERNAME$ npm install

      oder wenn Du bereits npm install ausgeführt hast nutze nun grunt und die Module


      USERNAME$ grunt uglify
      NetBeans IDE Grunt usage

      Nun solltest Du erfolgreich Grunten können, ich hoffe konnte Dir helfen. Für fragen Kritik oder auch Feedback einfach das Kommentar Formular nutzen.

      Dein Kommentar

      * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
      Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
      ?

      Dieses Feld ist optional
      Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

      Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

      Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
      tnado SEO & AMP CMS © 2019 | Alle Rechte Vorbehalten
      Created with tnado SEO CMS