Was sind Grunt und Bower und warum brauche ich das?

Als JavaScript Entwickler weisst du natürlich, was Grunt und Bower tun und warum sie so nützlich sind.

Für alle Anderen ist dieser Beitrag gedacht. Er dreht sich um die Automatisierung von Aufgaben und Abhängigkeiten.
Grunt ist für die Aufgaben zuständig, Bower für die Abhängigkeiten.

Grunt ist ein sogeannter JavaScript Task Runner, der wiederkehrende Aufgaben automatisiert. Solche Aufgaben sind beispielsweise minification, compilation, unit-testing, linting und noch ein paar mehr. Noch nie etwas von diesen Aufgaben gehört? Kein Problem, hier eine kurze Erläuterung der Begriffe.

• Minification (Minifizierung)
  In JavaScript sind viele Leerzeichen, Kommentare und Zeichen, die nicht zur Ausführung des Code benötigt werden, enthalten, aber zum Browser des Besuchers übertragen werden müssen. Minifizierung bedeutet, diese Zeichen herauszufiltern. Aus

  var a = [];
  for (var i = 0; i < 20; i++) {
    a[i] = i;
  }

  wird das Kürzere

  for(var i=0,a=[];i<20;i++){a[i]=i}

• Compilierung
  Hier geht es um das Übersetzen des Codes der Stylesheet Sprachen LESS und SASS in „einfache“ CSS Dateien oder auch von JavaScript Sprachen wie CoffeeScript in das „einfache“ JavaScript.
• Unit-Testing (Modultests)
  Modultests testen einzelne Bestandteile einer Software und nicht die gesamte Software auf einmal. Wenn ein Teil den Test bestanden hat, ist die Chance erheblich höher, dass die gesamte Software die Tests besteht.
• Linting (statische Code Analyse)
  Lint ist eine Software für die statische Code Analyse. Damit ist beispielsweise die Formatierung des Quellcodes gemeint, z.B. mit dem Node.js Paket HTML Lint.

Diese Aufgaben sind notwendig, oft zeitaufwendig und für Anfänger fehleranfällig. Bei zunehmender Industrialisierung in der Webentwicklung erlauben solche Tools unter anderem auch die Miniaturisierung von Aufgaben. Ein Entwickler ist dann für einen kleinen Teil der Anwendung zuständig. Dieser Teil wird getestet, standardisiert, formatiert und automatisiert übernommen.

Die oben beschriebenen Aufgaben können mit Grunt automatisiert werden. Wenn du in deiner LESS Datei etwas änderst, so verwandelt der JavaScript Task Runner Grunt im Hintergrund die LESS Datei automatisch in eine CSS Datei. Er sitzt quasi im Hintergrund und wartet darauf, dass sich etwas ändert. Wenn er eine Änderung bemerkt, bringt er alles auf den neuesten Stand. Das ist praktisch! Grunt selbst ist ein Paket der JavaScript Laufzeitumgebung Node.js. Damit Grunt weiß, was es tun soll, musst du deine Anweisungen in eine Konfigurationsdatei, das sogenannte Grunt File, stellen.

Installation und Nutzung

Damit Grunt laufen kann, benötigt es eine installierte Node.js Umgebung (Download für alle Plattformen). Eine Entwicklungsumgebung oder ein besonderer Editor ist nicht zwingend notwendig aber hilfreich. Eine verbreitete Umgebung ist das Produkt Webstorm der Firma JetBrains. Zum Ausprobieren gibt es eine kostenlose 30 Tage Testversion.

Bei Node.js Projekten gibt es normalerweise eine Datei package.json. In dieser Datei sind alle notwendigen Informationen über vorhandene Node.js Pakete hinterlegt. Hier ein Beispiel mit Abhängigkeiten zu Grunt Paketen und einer Mindestversion von Node.js:

...
"devDependencies": {
  ...
  "grunt": "^0.4.5",
  "grunt-contrib-sass": "^0.9.2",
  "grunt-contrib-watch": "^0.6.1",
  ...
},
"engines": {
 "node": ">=0.10.0"
}
...

Im Verzeichnis, das die package.json Datei enthält, werden mit dem Befehl npm-install die benötigten Pakete installiert. Wenn du ein Projekt vor dir hast, das dann noch ein Grunt file (Gruntfile.js) enthält, reicht normalerweise der Aufruf grunt in diesem Verzeichnis aus, um den Task Manager zu starten und im Hintergrund arbeiten zu lassen. Wenn du an den JavaScript oder SASS Dateien etwas änderst, sollte sich Grunt um die gewünschte Umwandlung der Dateien kümmern. Der Inhalt eines Grunt Files sieht beispielsweise so aus (u.a. Pfade für die Umwandlung von JavaScript und SASS).

...
module.exports = function (grunt) {
 // show elapsed time at the end
 require('time-grunt')(grunt);
 // load all grunt tasks
 require('load-grunt-tasks')(grunt);

// configurable paths
 var directoriesConfig = {
  src: {
    js: 'js',
   sass: 'sass',
   sassFile: 'sass/styles.scss',
  images: 'images',
  spriteFile: '../../sass/base/_sprite.scss'
 },
 dist: {
  js: 'dist/js',
  css: 'dist/css',
  cssFile: 'dist/css/styles.css',
  images: 'dist/css'
 }
};

Außer diesen Umwandlungen können im Grunt File beispielsweise auch Pakete wie browsersync gestartet werden. Browsersync aktualisiert „live“ alle Browser, die sich gerade deine Seite lokal ansehen. Das ist nützlich, weil du dann direkt auf dem PC, dem Telefon und dem Tablet sehen kannst, wie sich deine Änderungen am Code im entsprechenden Browser auswirken. Es bietet auch weitere Features, wie das Debugging innerhalb des Browsers auf dem entsprechenden Device.

Bower

Bower ist ein Paketmanager. Im Unterschied zu Grunt geht es bei Bower nicht um die Automatisierung der Abarbeitung von Aufgaben, sondern um die automatisierte Verwaltung von JavaScript Bibliotheken. Bower ist ebenfalls ein Node.js Modul und benötigt wie Grunt eine Konfigurationsdatei, in diesem Fall ein „Bower File“ (bower.json), in dem alle Anweisungen stehen. Hier ein Beispiel für die Definition von Abhängigkeiten in einer bower.json Datei. Jede Zeile ist eine JavaScript Bibliothek (Polymer, React, react-photoswipe, magnific-popup)

"dependencies": {
  "polymer": "~1.3.1",
  "react": "^0.14.7",
  "react-photoswipe": "^0.5.1",
  "magnific-popup": "~1.1.0"
 }

Anwendung

Bei einer Website bestehen im Frontend Bereich meistens Abhängigkeiten zu bestimmten JavaScript Bibliotheken und Frameworks wie Bootstrap. Bower sorgt dafür, dass diese Bibliotheken in der produktiven Website nicht „vergessen“ werden. Die Aufgaben, wie die Kompilierung von LESS/SASS nach CSS übernimmt Grunt.
Durch diese Automatisierung ist sichergestellt, dass nichts vergessen und der Code planmäßig optimiert wird. Bei der Entwicklung von Themes für Content Management Systeme wird heute gern von den Möglichkeiten der Automatisierung Gebrauch gemacht. Wenn du solche Themes an deine Bedürfnisse anpassen willst, kannst du vorhandene Grunt und Bower Files nutzen.

Fazit

Automatisierung ist bei der industriellen Produktion von Software wichtig, weil sie wiederkehrende Aufgaben beschleunigt und dabei hilft Flüchtigkeitsfehler zu vermeiden. Wenn die Code Basis gut organisiert ist und die Entwicklungstools einheitlich sind, helfen Grunt und Bower bei langweiligen, wiederkehrenden Aufgaben und du hast Zeit dich um das Wesentliche zu kümmern.
Neue Features können in kürzerer Zeit realisiert werden.

Links

• GRUNT
• Bower

tl;dr: Automatisierung beschleunigt und ordnet die Entwicklung von Websites.