Grunt Task Runner als Node.JS-Anwendung unter Windows
von Oliver Richter (Kommentare: 0)
Mit dem Grunt Task Runner und seinen Plugins lassen sich z.B. LESS-Dateien bequem in CSS-Dateien umwandeln, zusammenfassen, minimieren, auf den Dateiserver laden und vieles mehr. Hier eine kurze Anleitung zur Installation von Grunt als Node.JS-Anwendung an einem Beispiel, diesmal durchgeführt unter Windows.
Installation
Zuerst muss die Installation von Node.JS als Basis für Grunt vorgenommen werden. Bitte laden Sie unter https://nodejs.org die aktuelle Version von Node.JS für Windows herunter und installieren Sie diese.
Anschließend kann man über die Windows-Eingabeaufforderung Befehle des "Node.js Package Managers" (kurz "npm") verwenden, um npm-Erweiterungen und eben Grunt und zu installieren. Als erstes wird das "Grunt Command Line Interface" (cli) installiert, mit dem Befehl:
npm install -g grunt-cli
Anhand von 2 anzulegenden Konfigurationsdateien, nämlich package.json und Gruntfile.js können nun über die Eingabeaufforderung die nötigen npm-Module für Grunt und Grunt selbst installiert und eingerichtet und Grunt anschließend verwendet/gestartet werden.
In dieser Anleitung setze ich beispielhaft das Szenario voraus, dass mehrere vorhandene LESS-Dateien aus einem Ordner zusammengefasst, minimiert und als eine einzige CSS-Datei ausgegeben werden sollen. Die folgende Ordner- und Dateistruktur ist Grundlage hierfür (bitte stellen Sie sicher, dass die Ordner und Dateien zum Funktionieren dieses Beispiels vorhanden sind):
Projektordner/css/screen.css
Projektordner/less/importer.less
Projektordner/less/screen.less
Projektordner/less/mobile.less
Projektordner/less/print.less
Projektordner/package.json
Projektordner/Gruntfile.js
Nur als Hinweis: Über die Datei importer.less werden die anderen 3 LESS-Dateien importiert. Die Datei importer.less könnte in etwa so aussehen:
@media print {
@import "print.less";
}
@media screen {
@import "screen.less";
@import "mobile.less";
}
Legen Sie im Projektordner die Datei package.js wie folgt an. In der Datei werden Infos zu Ihrem Projekt definiert, wie Name, Beschreibung, Version, zugehörige Module/Abhängigkeiten und vieles mehr. Weitere Infos hierzu finden Sie unter https://docs.npmjs.com/files/package.json
{
"name": "projektname",
"version": "1.0.0",
"description": "Hier steht Ihre Projektbeschreibung",
"main": "Gruntfile.js",
"author": "Vorname Nachname",
"license": "Lizenzinfo",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-watch": "^0.6.1",
"jit-grunt": "^0.9.1"
}
}
Legen Sie im Projektordner anschließend die Datei Gruntfile.js wie folgt an:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
developmentMIN: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"css/screen.css": "less/importer.less" // Ziel- und Quelldatei
}
},
watch: {
styles: {
files: ['less/**/*.less'], // Zu ueberwachende Dateien/-Muster
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
};
Nachdem die Dateien und Ordner angelegt sind, wechseln Sie in der Eingabeaufforderung bitte in das Projektverzeichnis und rufen von dort aus den folgenden Befehl auf:
npm install
Nun sollten alle nötigen Module inkl. Grunt installiert werden in einen Ordner mit der Bezeichnung "node_modules". Sollte dies ohne Fehler funktionert haben, können Sie Grunt durch den folgenden Befehl starten:
Grunt
Die Grunt-Konfigurationsdatei wurde hier so eingerichtet, dass die CSS-Datei sofort neu zusammengestellt wird, sobald eine Änderung an einer der LESS-Dateien vorgenommen wird. Ein sogenannter "Watch"-Prozess verfolgt dabei die Änderungen an den LESS-Dateien und setzt dann den Task Runner in Gang.
Bei Fehlern in den LESS-Dateien werden diese direkt in der Eingabeaufforderung angezeigt und der Prozess abgebrochen.
Diese Anleitung hier ist äußerst minimalistisch und klein gehalten. Es gibt im Netz eine Reihe guter und ausführlicherer Anleitungen zur Verwendung von Grunt, siehe http://gruntjs.com. Infos zu den npm-Modulen/Paketen und viele nützliche Hinweise sind zu finden unter https://www.npmjs.com.
Übrigens, beim Kopieren eines gesamten Projektordners mit Hilfe des Windows Explorers bzw. insbesondere beim Kopieren des Ordners "node_modules" stößt man unter Windows ggf. das Problem eines zu langen Pfades (maximal 256 Zeichen). Der Ordner bzw. seine Unterordner können dann nicht vollständig kopiert werden. Das Problem wird unter https://msdn.microsoft.com/en-us/library/windows/desktop/aa365247%28v=vs.85%29.aspx#maxpath aufgegriffen.
Wichtige Befehle
Befehl | Beschreibung |
---|---|
npm update -g npm | Update der NPM-Version |
npm install -g grunt-cli | Grunt-Client installieren |
npm install | Es werden alle nötigen Pakete installiert, vorausgesetzt wird eine korrekte Datei package.json und Gruntfile.js |
npm install grunt --save-dev | Installiert Grunt lokal |
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben