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 Vorteile ist das Du auch so JavaScript Dateien komprimieren kannst, was nicht so einfach wie bei SASS oder LESS wäre.
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 Meine AKTUELLE Version
Grunt eignet sich sehr gut für bereits vorhandene Projekte um Teile davon zu bearbeiten. Oder auch für kleine Projekte sehr gut geeignet, doch es wird überwiegend immer weniger den es gibt Webpack und andere Bündler.
Was wird benötigt für Netbeans und Grunt
Hinweis
Geben Sie cmd in die Adressleiste ein und drücken Sie die Eingabetaste
Halten Sie die Umschalttaste gedrückt, während Sie mit der rechten Maustaste auf eine leere Stelle im Ordner klicken, und wählen Sie „Befehlsfenster hier öffnen“.
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
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:
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 alternativ aber auch NPM, wenn Du Composer nutzt dann 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:
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
// front.min.js ist minimiert, alles was hier drunter im steht wird in front.min.js 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.
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.
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
Nun solltest Du erfolgreich Grunten können, ich hoffe konnte Dir helfen. Für fragen Kritik oder auch Feedback einfach das Kommentar Formular nutzen.
Anzeige