GRUNT – Zeit sparen mit JavaScript

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.

Und nun?

Veröffentlicht am