Mario Fink ‱ Webentwickler

GRUNT – Zeit sparen mit JavaScript

16. Februar 2014

Keine Lust stÀndig die gleichen langweiligen Dinge zu erledigen?

Sollte es sich um Aufgaben aus dem Bereich der Webentwicklung handeln, dann könnte Grunt Abhilfe schaffen. Damit lÀsst sich folgendes automatisieren:

  • CSS und JavaScript Dateien zusammenkleben und minifizieren
  • Kompilierung von LESS, SASS, CoffeeScript etc.
  • Unit Testing
  • eine Menge mehr

Installation und erste Schritte

Voraussetzung: Installation von Node.js

Grunt in der Kommandozeile installieren

npm install -g grunt-cli

Dadurch wird das Grunt Kommandozeileninterface global installiert – möglicherweise sind hierfĂŒr Admin-Rechte erforderlich (sudo bzw. unter Windows die Eingabeauffordung als Administrator ausfĂŒhren)

FĂŒr dieses Beispiel richte ich ein Demoprojekt ein. DafĂŒr einen Ordner anlegen und darin ein neues Node-Projekt initialisieren:

mkdir grunt-demo
mkdir grunt-demo/js
mkdir grunt-demo/css
cd grunt-demo
npm init

Die Abfragen nach npm-init alle mit Enter bestĂ€tigen. Dadurch wird eine initiale package.json Datei erstellt. Der nĂ€chste Befehl fĂŒgt dieser Datei eine AbhĂ€ngigkeit hinzu und installiert sie automatisch:

npm install grunt --save-dev

Die grundlegende Installation vom Grunt JavaScript Task Runner ist damit abgeschlossen. Damit nun tatsÀchlich Aufgaben erledigt werden können benötigt man Plugins.

Plugins installieren

Eine typische Aufgabe, die sich leicht mit Grunt erledigen lĂ€sst, ist das zusammenkleben von JavaScript und CSS Dateien. DafĂŒr muss das grunt-contrib-concat Plugin installiert werden:

npm install grunt-contrib-concat --save-dev

Fast fertig. Nun muss man Grunt nur noch mitteilen, was erledigt werden soll. Dies wird im Gruntfile.js definiert. Im Projektordner also folgende Datei erstellen:

Gruntfile.js

module.exports = function(grunt) {
  // Grunt Konfiguration:
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    // Konfigurieren des concat Tasks
    concat: {
      js: {
        src: [
          // Alle JavaScript Dateien in diesem Ordner
          "js/*.js",
        ],
        // werden in dieser Datei zusammengefĂŒhrt
        dest: "scripts.js",
      },
      css: {
        src: [
          // Alle CSS Dateien in diesem Ordner
          "css/*.css",
        ],
        // werden in dieser Datei zusammengefĂŒhrt
        dest: "styles.css",
      },
    },
  })
  // Diese Plugins sollen geladen werden:
  grunt.loadNpmTasks("grunt-contrib-concat")
  // Was beim Aufruf von "grunt" passieren soll:
  grunt.registerTask("default", ["concat"])
}

Grunt ausfĂŒhren

Die Vorarbeit ist erledigt. Um Grunt nun die oben beschriebenen Aufgaben erledigen zu lassen, ist nur noch folgender Befehl auf der Kommandozeile im Projektordner auszufĂŒhren:

grunt

Viel einfacher geht’s kaum. Nun sollte sich der Inhalt sĂ€mtlicher JavaScript bzw. CSS Dateien in den Dateien scripts.js und styles.css wiederfinden.

Code fĂŒr dieses Beispiel auf github.com

Und nun?