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

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 1 und 1.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.