Automatisierung ist der beste Freund des Programmierers

Wir bauen eine JavaScript-Applikation: (Fast) alles automatisch!
Kommentare

Automatisierung ist der beste Freund des Programmierers. Im Bereich von JavaScript-Applikationen hat sich hier in letzter Zeit sehr viel getan, und eine Reihe sehr nützlicher Werkzeuge sind entstanden. In diesem Artikel erfahren Sie, wie Sie verschiedene Aufgaben bei der Entwicklung von JavaScript-Applikationen automatisieren und sich damit einiges an Arbeit ersparen können.

Die Automatisierung von Aufgaben kommt immer dann ins Spiel, wenn Sie gewisse Dinge mehr als einmal auf die gleiche Art ausführen müssen. Das Ziel der Automatisierung besteht darin, dass der Aufwand für den Entwickler möglichst reduziert wird, sodass er sich auf die eigentliche Arbeit konzentrieren kann.

Bei der Erstellung einer Applikation gibt es verschiedenste Stufen, bei denen sich unterschiedliche Aufgaben automatisieren lassen. Eine typische Problemstellung ist das Aufsetzen der Applikation zur Entwicklung. Das umfasst alle Arbeiten, die erforderlich sind, damit die Anwendung betrieben werden kann. Zu diesem Zweck müssen unter anderem sämtliche Bibliotheken installiert oder die Style Sheets der Anwendung vorhanden sein.

Die Basis der Entwicklungsumgebung für dieses Beispiel bildet das Versionskontrollsystem. Ob Sie hier Git, Subversion, Mercurial oder ein anderes Versionskontrollsystem einsetzen, ist für den Build-Prozess Ihrer Applikation nicht entscheidend. Hauptsache Sie setzen ein solches System ein, um die verschiedenen Versionen Ihrer Applikation zu verwalten. Das Versionskontrollsystem bildet außerdem die Basis des Continuous-Integration-Systems. Jede neue Version Ihrer Applikation wird durch dieses System automatisch gebaut. Mit dem Versionskontrollsystem beginnen allerdings schon die Anforderungen an die verwendeten Werkzeuge. Im Normalfall sollten Sie es vermeiden, alle Bibliotheken, die in Ihrer Applikation eingesetzt werden, in Ihrem Versionskontrollsystem zu archivieren. Im Verlauf dieses Artikels lernen Sie mit Bower ein Werkzeug kennen, mit dem Sie die Abhängigkeiten Ihrer Applikation verwalten können.

Neben dem Versionskontrollsystem kommt eine Reihe von Werkzeugen zum Umgang mit den verschiedenen Frontend-Technologien zum Einsatz. Diese Werkzeuge existieren in den verschiedensten Programmiersprachen, wie beispielsweise Java oder Ruby. Da sich dieser Artikel hauptsächlich mit JavaScript beschäftigt, kommen hier Werkzeuge auf Basis von Node.js zum Einsatz. Das bedeutet, dass alle Werkzeuge in JavaScript geschrieben sind.

Bower

Das erste Werkzeug in diesem Artikel, ist, wie bereits erwähnt, Bower – ein Dienstprogramm, das von Twitter Open Source zur Verfügung gestellt wird, um Abhängigkeiten im Frontend auflösen zu können. Bower ist ein Kommandozeilenwerkzeug auf Basis von Node.js. Das bedeutet, dass Sie auf Ihrem System zunächst Node.js installieren müssen. Mit der Node.js-Plattform erhalten Sie auch den Node Package Manager (npm), mit dessen Hilfe Sie dann Bower installieren können. Der npm erlaubt zwei Arten der Installation: die lokale Installation in das aktuelle Verzeichnis und die globale Installation in ein Systemverzeichnis. Für sämtliche Kommandozeilenwerkzeuge sollten Sie die globale Installation wählen. Alle global installierten Pakete befinden sich im Suchpfad des Systems. Das bedeutet, dass Sie den Aufruf des jeweiligen Werkzeugs in jedem Verzeichnis ohne weitere Pfadangabe absetzen können. Diese Installationsvariante macht es allerdings erforderlich, dass Sie auf Unix-Systemen über Administratorrechte verfügen, da es sich bei dem Installationsziel um ein geschütztes Systemverzeichnis handelt. Haben Sie Bower mit dem Kommando npm install -g bower installiert, ist es bereit zur Verwendung. Für die Benutzung von Bower benötigen Sie auch keine Administratorrechte mehr.

Im einfachsten Fall nutzen Sie Bower direkt auf der Kommandozeile. Um beispielsweise jQuery in Ihrer Applikation zu installieren, nutzen Sie den Befehl bower install jquery. Dieses Kommando sorgt dafür, dass der Quellcode der aktuellen Version von jQuery heruntergeladen wird. Dieser Quellcode wird in ein Verzeichnis mit dem Namen jquery im Verzeichnis bower_components gespeichert. Durch die Installation erhalten Sie neben einigen weiteren Dateien sowohl den komprimierten als auch den unkomprimierten Quellcode von jQuery.

Bower kann jedoch viel mehr als nur den Quellcode von bestimmten Bibliotheken aus dem Internet herunterladen. Baut eine Bibliothek oder ein Framework, wie beispielsweise Backbone.js, auf einer Bibliothek wie jQuery auf, löst Bower diese Abhängigkeit automatisch mit auf. Dieser Mechanismus funktioniert, weil Bower diese Informationen aus einer Konfigurationsdatei bezieht. Der Name dieser Datei lautet im Normalfall bower.json. Sie können eine solche Konfigurationsdatei auch für Ihre Applikation erstellen und werden dabei von Bower unterstützt. Mit dem Kommando bower init starten Sie einen Wizard, der Ihnen eine Reihe von Fragen stellt und anhand Ihrer Antworten die Konfigurationsdatei erstellt. Eine der wichtigsten Sektionen dieser Konfigurationsdatei ist der Abschnitt dependencies. Hier können Sie angeben, welche Bibliotheken Sie für Ihre Applikation benötigen. Sie müssen diesen Abschnitt allerdings nicht von Hand pflegen. Auch diese Aufgabe nimmt Ihnen Bower ab. Mit der Option –save geben Sie bei der Installation von Bibliotheken an, dass diese in Ihre Konfigurationsdatei mit aufgenommen werden sollen.

In Ihrem Versionskontrollsystem sollten Sie das Verzeichnis bower_components komplett ignorieren und es nicht mit in die Versionskontrolle aufnehmen. Installieren Sie Ihre Applikation aus dem Versionskontrollsystem heraus, klonen Sie zunächst Ihr Repository und führen danach im Verzeichnis, in dem die Datei bower.json liegt, das Kommando bower install aus. Dieses Kommando sorgt dafür, dass das Verzeichnis bower_components angelegt wird und sämtliche Abhängigkeiten, die in der Konfigurationsdatei angegeben sind, in der korrekten Version heruntergeladen werden.

Haben Sie alle externen Abhängigkeiten abgedeckt, geht es im nächsten Schritt daran, den eigentlichen Quellcode Ihrer Applikation zu strukturieren.

Module

Bei der Entwicklung einer Applikation sollten Sie eine Faustregel immer beachten: Eine Datei darf maximal zwei Sprachen enthalten. Das sind im Normalfall Englisch für die Kommentare und beispielsweise JavaScript, HTML oder CSS. Je nachdem, wie Sie Ihre Applikation strukturieren, sollten Sie diese Trennung auch in der Verzeichnisstruktur weiterführen.

Sobald Ihre Applikation umfangreicher wird, sollten Sie Ihren Quellcode in Module unterteilen. Ein Modul ist eine in sich geschlossene Einheit innerhalb der Applikation, wie beispielsweise eine Navigationsleiste oder eine Nachrichtenbox. Bei der Strukturierung Ihrer Applikation und der Module können Sie verschiedene Ansätze wählen. Eine Variante ist, dass Sie für jedes Modul ein eigenes Verzeichnis erstellen. Dieses Verzeichnis enthält dann sämtliche erforderlichen Ressourcen für das jeweilige Modul. Also sowohl den JavaScript-Quellcode als auch die HTML-Templates und gegebenenfalls Style Sheets oder Mediendateien.

Die grundlegende Verzeichnisstruktur Ihrer Applikation weist auf oberster Ebene ein Verzeichnis mit dem Namen src auf. Dieses enthält die einzelnen Module. Neben diesem Verzeichnis gibt es ein weiteres Verzeichnis mit dem Namen test, das die Tests für die Module beinhaltet. Die Module aus dem src-Verzeichnis sind nicht darauf ausgelegt, in der endgültigen Version Ihrer Applikation verwendet zu werden, da sie in dieser Form zu viele Anfragen an den Server erfordern würden. Während des Build-Prozesses werden sämtliche Dateien zu möglichst wenigen Dateien zusammengefasst, die dann in der endgültigen Version der Applikation ausgeliefert werden. Diese endgültige Version findet sich im Verzeichnis dist wieder.

Während der Entwicklung Ihrer Applikation unterstützt Sie der Modulloader RequireJS bei der Entwicklung, sodass Sie nicht für jede Datei, die Sie verwenden, ein Script-Tag in Ihre Applikation einfügen müssen. Eine Applikation, die Sie mit RequireJS erstellen, benötigt lediglich ein Script-Tag. Die übrigen Dateien werden durch den Modulloader geladen:

define(['myFile'], function (myFile) {
    return function () {
      ...
    }
});

In diesem Codesnippet sehen Sie ein typisches Modul mit RequireJS. Mit einem Aufruf der define-Methode definieren Sie ein Modul zur späteren Wiederverwendung. Das erste Argument ist ein Array mit den Pfaden zu den Dateien, die als Abhängigkeiten für das Modul benötigt werden. Das zweite Argument ist eine Callback-Funktion, die das eigentliche Modul enthält. Diese Funktion erhält die Abhängigkeiten als Parameter. Der Rückgabewert der Callback-Funktion kann dann als Abhängigkeit in anderen Modulen verwendet werden. Als Rückgabewert können Sie sowohl Funktionen als auch Objekte nutzen. Durch die Kapselung in Funktionen haben Sie einen definierten Scope und können so den Zugriff auf Variablen beschränken und auch Namenskonflikte vermeiden.

Durch den Einsatz von RequireJS sind Sie der Anforderung nach nur zwei Sprachen pro Datei schon einen großen Schritt näher gekommen. Als Nächstes müssen Sie dafür sorgen, dass Sie die HTML-Strukturen aus Ihrem JavaScript-Quellcode auslagern. Zu diesem Zweck gibt es für RequireJS ein Plug-in. Das text-Plug-in sorgt dafür, dass Sie eine Textdatei als Abhängigkeit für ein Modul angeben und auf deren Inhalt dann über eine Variable zugreifen können. Die Textdatei kann beispielsweise die HTML-Struktur für das Modul enthalten. Dadurch vermeiden Sie, HTML-Elemente in Ihrem JavaScript-Quellcode zu schreiben.

Eine Applikation ist allerdings dadurch gekennzeichnet, dass es sich nicht nur um eine Ansammlung statischer HTML-Dateien handelt, sondern dynamische Inhalte dargestellt werden sollen. Aus diesem Grund wird die Kombination aus RequireJS und den Textdateien um eine Template-Engine erweitert. Die grundlegende Funktionalität einer Template-Engine besteht darin, dass Platzhalter in einer Textdatei durch bestimmte Werte ersetzt werden. Template-Engines unterstützen Sie außerdem mit Schleifen, Bedingungen und verschiedensten Hilfsfunktionen. Sie sollten allerdings darauf achten, nicht zu viel Logik in die Templates auszulagern.

Eine Template-Engine, die Sie für Ihre Applikation verwenden können, ist Handlebars. In Verbindung mit RequireJS lässt sich die Template-Engine sehr einfach einbinden. Listing 1 zeigt ein konkretes Beispiel.

define(['handlebars', 'text!templates/myModule.html'], function (Handlebars, template) {
    return function () {
      ...
      var tpl = Handlebars.compile(template);
      tpl({name: 'Klaus'});
      ...
    }
});

Wie bereits erwähnt, eignen sich die Module in ihrem aktuellen Zustand nicht für den produktiven Einsatz. Allein das Modul aus Listing 1 benötigt mindestens drei Anfragen an den Server. Die erste Anfrage dient dem Laden des eigentlichen Moduls. Im zweiten Request wird die Template-Engine geladen und in der dritten Anfrage wird schließlich das Template vom Server heruntergeladen. Das eigentliche Ziel ist die Kombination dieser drei Anfragen zu einer einzigen Anfrage. Mit dem RequireJS Optimizer können Sie Ihre gesamte Applikation zu einer einzigen JavaScript-Datei transformieren, die dann den gesamten Quellcode enthält. Der Inhalt dieser Datei wird außerdem mit einem JavaScript Minifier weiter optimiert.

Den RequireJS Optimizer können Sie, wie schon Bower, über den npm auf Ihrem System installieren. Sie müssen lediglich das Kommando npm install -g requirejs auf der Kommandozeile ausführen. Nach der Installation steht Ihnen das Kommandozeilenwerkzeug r.js zur Optimierung Ihrer RequireJS-Applikation zur Verfügung. Sie können r.js die erforderlichen Konfigurationsoptionen entweder direkt über die Kommandozeile übergeben oder die Optionen in einer Konfigurationsdatei sammeln und diese dann beim Aufruf angeben. Der folgende Code zeigt Ihnen ein Beispiel für eine solche Konfigurationsdatei:

({
    baseUrl: ".",
    name: "main.js",
    out: "main-build.js"
})

Haben Sie die Konfigurationsdatei unter den Namen build.js gespeichert und möchten jetzt Ihre Applikation optimieren, müssen Sie auf der Kommandozeile den Befehl r.js -o build.js ausführen. Der RequireJS Optimizer nimmt die Datei main.js als Einstiegspunkt in Ihre Applikation an und generiert von dieser Datei ausgehend unter Berücksichtigung aller Abhängigkeiten die Datei main-build.js, die sämtliche über RequireJS geladenen Module beinhaltet.

Die als nächstes verwendete Technologie richtet sich weniger an JavaScript, sondern vielmehr an die komfortable Erstellung und Verwaltung von Style Sheets.

Less

Mit der dynamischen Style-Sheet-Sprache Less können Sie Ihre Style Sheets besser wartbar und lesbar gestalten. Die Kehrseite ist, dass Sie die Style Sheets in einem bestimmten Format schreiben müssen und mit einem Compiler in ein gültiges Style Sheet umwandeln. Der ursprüngliche Less-Compiler wurde in JavaScript geschrieben, mittlerweile existieren aber auch Portierungen für Ruby, PHP oder Java.

Less ist nicht der einzige Vertreter dieser Art von Erweiterungen für CSS. Neben Less existieren unter anderem Sass und Stylus. Der Funktionsumfang dieser Werkzeuge ähnelt sich allerdings sehr. Sie bieten Variablen, mit denen Sie beispielsweise Farbcodes oder Zahlenwerte einmal zentral definieren können und Ihre Style Sheets sprechender gestalten können. Außerdem gibt es die so genannten Mixins. Das sind Codeblöcke in CSS, die Sie an anderen Stellen einfügen können. Benötigen Sie beispielsweise runde Ecken, müssen Sie im schlechtesten Fall sämtliche browserspezifischen Prefixe verwenden, was zu einem Block von mehreren Zeilen, statt zu einer einzigen Zeile führt. Mit Mixins können Sie diesen Block auslagern und sogar parametrisieren und ihn so wiederverwendbar machen. Ein weiteres bemerkenswertes Feature ist die Verschachtelung von Selektoren. Damit vermeiden Sie zu lange Selektorenketten und können sich zudem in Namespaces bewegen und haben damit eine bessere Kontrolle. Schließlich bieten Ihnen Funktionen und Operatoren die Möglichkeit, Werte innerhalb Ihrer Style Sheets zu manipulieren und berechnen zu lassen.

Mit nur einer Kommandozeile können Sie den Less-Compiler auf Ihrem System installieren. Der Befehl npm install -g less sorgt dafür, dass Ihnen das Werkzeug auf der Kommandozeile zur Verfügung steht. Der Less-Quellcode wird im Normalfall in separaten Dateien mit der Endung .less gespeichert. Die Umwandlung der .less-Dateien in reguläre CSS-Dateien geschieht auf der Kommandozeile. Mit der Installation des less-Pakets durch den npm können Sie das lessc-Kommando benutzen. Mit lessc style.less style.css wird aus der angegebenen Less-Datei eine CSS-Datei. Sie sind bei der Verwendung dieses Werkzeugs nicht darauf beschränkt, nur eine Less-Datei anzugeben. Sobald Sie mehr als eine Datei beim Aufruf angeben, werden sämtliche Dateien zu einer zusammengefasst, was schließlich zu einer weiteren Reduzierung der Anfragen an den Server führt.

Je nachdem, wie umfangreich die Style Sheets Ihrer Applikation sind, sollten Sie unterschiedliche Arten der Strukturierung verwenden. Ist Ihre Applikation übersichtlich und haben Sie nur wenige Style-Angaben, können Sie Ihren Less-Quellcode in einer zentralen Datei verwalten. Sobald Sie aber mehrere verschiedene und unabhängige Module einsetzen, sollten Sie auch den Quellcode Ihrer Style Sheets entsprechend Ihrer Module aufteilen. Gemeinsame Styles können Sie nach wie vor in einer zentralen Datei verwalten. Da Sie die einzelnen Dateien beim Kompilieren zu einer Datei zusammenfassen, wirkt sich diese Strukturierung auch nicht negativ auf die Performance Ihrer Applikation aus.

Bei der Entwicklung Ihrer Applikation spielt nicht nur die Strukturierung und Optimierung Ihres Quellcodes eine Rolle, sondern auch die Qualität. Mit automatisierten Tests können Sie die Zuverlässigkeit Ihrer Applikation erhöhen.

Tests

Im Bereich der Softwaretests für JavaScript hat sich in den letzten Jahren viel getan. Der Nachteil dieser Entwicklung ist, dass es nicht das eine richtige Framework für Ihre Applikation gibt, sondern Sie sich stattdessen für das Werkzeug Ihrer Wahl entscheiden müssen. Für diesen Artikel wurde eine Kombination aus dem Testframework Jasmine und dem Testrunner Karma gewählt. Diese beiden Werkzeuge haben sich in den letzten Jahren etabliert und kommen häufig auch bei großen Applikationen zum Einsatz.

Das Testframework Jasmine ist in JavaScript geschrieben und selbst nicht abhängig von einer Serverkomponente, sodass Sie Ihre Tests direkt in einem Browser ausführen können.

Jasmine für sich alleine gesehen weist allerdings zwei entscheidende Nachteile auf: Zum einen müssen Sie zur Ausführung Ihrer Tests immer zum Browser wechseln und die Tests manuell ausführen, und zum anderen ist es für Sie recht umständlich, die Tests in mehreren Browsern auszuführen. Abhilfe schafft hier eine serverseitige Infrastruktur wie Karma.

Karma ist eine Serverkomponente, die Tests auf registrierten Browsern ausführt. Zu diesem Zweck können Sie beliebige Browser auch auf entfernten Systemen am Server registrieren. Der Server steuert bei jedem Testlauf alle registrierten Browser an und führt sämtliche Tests aus. So können Sie die verschiedensten Browser- und Betriebssystemversionen abdecken.

Karma ist, wie die meisten übrigen Werkzeuge auch, auf Basis von Node.js erstellt. Damit Sie Karma auf der Kommandozeile nutzen können, müssen Sie es über den npm installieren. npm install -g karma sorgt dafür, dass Sie Karma auf der Kommandozeile Ihres Systems nutzen können. Damit Sie die Jasmine-Tests Ihrer Applikation auf der Infrastruktur von Karma betreiben können, müssen Sie eine Konfiguration für den Server erstellen. Karma bietet Ihnen für diese Aufgabe Unterstützung in Form eines Wizards, den Sie über das Kommando karma init starten können. Neben dem Speicherort Ihres Quellcodes werden Sie beispielsweise nach den Browsern gefragt, die Karma auf Ihrem System starten soll. Auf einem Server ohne grafische Oberfläche wird das natürlich etwas schwierig. Aus diesem Grund können Sie auch nachträglich manuell Browser am Server registrieren. Standardmäßig öffnet Karma eine TCP-Verbindung auf dem Port 9876, sodass Sie im Browser einfach die IP-Adresse oder den Namen des Servers und die Portnummer angeben müssen, damit der Browser am Server registriert wird.

Haben Sie die Konfiguration erstellt, können Sie den Karma-Server durch die Angabe von karma start starten. Durch diesen Befehl werden die angegebenen Tests ein erstes Mal automatisch ausgeführt. Der Server ist ein lange laufender Prozess, bei dem Sie über das Kommando karma run einen erneuten Testlauf anstoßen können.

Die hier vorgestellten Werkzeuge stellen nur eine Auswahl aus der gesamten Palette an Tools für JavaScript-Applikationen dar. Sie sehen jedoch hier schon, dass es bei diesen wenigen Hilfsmitteln aufwändig werden kann, wenn Sie diese bei jeder Änderung Ihres Quellcodes ausführen müssen.

Grunt

An dieser Stelle kommt Grunt ins Spiel. Es ist ein Programm, mit dessen Hilfe Sie Aufgaben automatisieren können. Wie die übrigen Werkzeuge, baut auch Grunt auf Node.js auf. Die Besonderheit besteht darin, dass es aus zwei Komponenten besteht. Das Kommandozeilenwerkzeug grunt-cli müssen Sie mit dem npm-Kommando npm install -g grunt-cli global auf Ihrem System installieren. Diese Komponente stellt Ihnen das grunt-Kommandozeilenwerkzeug zur Verfügung. Die einzige Aufgabe dieses Werkzeugs ist es, die zweite Komponente – den eigentlichen Task-Runner – zu lokalisieren und auszuführen. Die lokale Komponente installieren Sie über das Kommando npm install grunt. Durch die fehlende Option -g weisen Sie den npm an, das Paket in das aktuelle Verzeichnis und nicht systemweit zu installieren. Durch dieses Kommando wird ein neues Verzeichnis node_modules erstellt. Sie sollten, wie auch schon bei Bower, dafür sorgen, dass dieses Verzeichnis nicht in Ihr Versionskontrollsystem aufgenommen wird. Damit Sie nicht bei jeder Installation die Kommandos zur Installation der lokalen npm-Pakete manuell ausführen müssen, sollten Sie eine Datei mit dem Namen package.json erstellen. Das ist die Konfigurationsdatei für Node.js-Applikationen und ist damit die serverseitige Entsprechung der bower.json-Datei. Der npm bietet Ihnen bei der Erstellung dieser Datei Hilfestellung. Setzen Sie das Kommando npm init auf Ihrer Kommandozeile ab, werden Ihnen einige Fragen gestellt, deren Beantwortung zu einer gültigen package.json-Datei führt.

Installieren Sie jetzt npm-Pakete, die Sie im Zuge der Entwicklung Ihrer Applikation benötigen, können Sie diese mit der Option –save-dev als Abhängigkeit in Ihre Konfigurationsdatei aufnehmen. Pakete, die Sie nicht nur für die Entwicklung, sondern auch für die Applikation selbst benötigen, können Sie mit der Option –save als reguläre Abhängigkeit aufnehmen. Am Beispiel von Grunt müsste das Kommando also korrekt npm install –save-dev grunt lauten. Um die Abhängigkeiten, die Sie in der Konfigurationsdatei angegeben haben, zu installieren, geben Sie einfach auf der Kommandozeile den Befehl npm install ein.

Führen Sie im aktuellen Status das Kommando grunt im Verzeichnis Ihrer Applikation aus, erhalten Sie lediglich eine Fehlermeldung, die angibt, dass keine Datei mit dem Namen Gruntfile gefunden werden konnte. Die Datei mit dem Namen Gruntfile ist die Konfigurationsdatei, mit der Sie angeben, welche Tasks Grunt für Ihre Applikation ausführen soll. In folgendem Code sehen Sie das Grundgerüst der Gruntfile-Datei:

module.exports = function (grunt) {
  grunt.initConfig({
  });
};

Grunt für sich gesehen nutzt Ihnen und Ihrer Applikation noch recht wenig. Es wird erst durch zusätzliche Plug-ins zu einer wertvollen Unterstützung und für Grunt existieren für zahlreiche Werkzeug-Plug-ins. So gibt es beispielsweise für Bower, RequireJS, Less oder Karma Plug-ins. Jedes dieser Plug-ins ist als npm-Paket verfügbar und muss vor der Verwendung installiert werden. Nach der Installation müssen Sie das Plug-in in Ihrer Konfigurationsdatei registrieren und konfigurieren.

Sie können sich einige Schreibarbeit ersparen, wenn Sie das load-grunt-tasks-Plug-in mit dem Befehl npm install –save-dev load-grunt-tasks installieren und in Ihrer Konfigurationsdatei vor dem Aufruf der initConfig-Methode mit der Zeile require(‚load-grunt-tasks‘)(grunt); registrieren. Dadurch müssen Sie nur noch Ihre Plug-ins mit dem npm installieren und in der Gruntfile konfigurieren. Die Registrierung der einzelnen Plug-ins übernimmt das load-grunt-tasks-Plug-in.

Das erste Werkzeug, dessen Ausführung Sie nun über Grunt automatisieren, ist Bower. Hierfür müssen Sie zunächst mit dem Kommando npm install –save-dev grunt-bower-task das entsprechende Plug-in installieren. Den erforderlichen Abschnitt in der Grunt-Konfigurationsdatei sehen Sie in Listing 2. Diesen Quellcode platzieren Sie in dem Objekt, das Sie dem Aufruf der initConfig-Methode als Argument übergeben.

bower: {
  install: {
    options: {
      targetDir: './lib',
      install: true,
      verbose: false,
      cleanTargetDir: false,
      cleanBowerDir: false,
      bowerOptions: {}
    }
  }
}

Nachdem Sie diese Anpassungen durchgeführt haben, können Sie mit einem Aufruf von grunt bower Bower über Grunt ausführen lassen. Das Resultat ist, dass jQuery in ein Verzeichnis lib installiert wird.

Im nächsten Schritt sorgen Sie dafür, dass Ihre Applikation gebaut wird, also alle einzelnen Dateien zu einer einzigen Datei zusammengefasst werden. Sie benötigen dafür wiederum ein Grunt-Plug-in. Mit dem Kommando npm install –save-dev grunt-contrib-requirejs installieren Sie das entsprechende Plug-in. Ein Beispiel für eine Konfiguration finden Sie in Listing 3.

requirejs: {
  compile: {
    options: {
      name: "main",
      baseUrl: "src/js/app/",
      mainConfigFile: "src/js/app/main.js",
      out: "dist/js/app/main-build.min.js"
    }
  }
}

Auch für Less existiert ein Grunt-Plug-in, das Sie ganz einfach mit dem Kommando npm install –save-dev grunt-contrib-less installieren können.

less: {
  app: {
    files: {
      "dist/style/style.css": "src/less/style.less"
    }
  }
}

Mit der Konfiguration aus Listing 4 wandeln Sie die .less-Datei in die entsprechende .css-Datei um. Das letzte Werkzeug, das Sie hier noch in Ihre Grunt-Konfiguration integrieren, sind die Unit Tests Ihres Projekts. Wie Sie schon in den vorangegangen Beispielen sehen konnten, läuft die Installation und Konfiguration immer nach dem gleichen Schema ab. Das Plug-in fügen Sie über das Kommando npm install –save-dev grunt-karma zu Ihrem Projekt hinzu. In der Konfiguration müssen Sie lediglich auf die Karma-Konfiguration verweisen. Wie das konkret auszusehen hat, sehen Sie folgend:

karma: {
  unit: {
    configFile: 'karma.conf.js'
  }
}

Mit dieser Konfigurationsdatei sind Sie nun in der Lage, die Abhängigkeiten Ihres Projekts mit Bower aufzulösen, Ihre Module mit RequireJS zusammenzufassen, Ihren Less-Quellcode in CSS zu kompilieren und Ihre Tests auszuführen. Jede einzelne dieser Aufgaben können Sie mit einem entsprechenden Grunt-Befehl ausführen. Für die Abhängigkeiten setzen Sie beispielsweise das Kommando grunt bower ab.

Schließlich existiert noch eine Möglichkeit, mit der Sie häufig benötigte Kombinationen von Befehlen zusammenfassen können. Integrieren Sie nach dem Aufruf von initConfig die Zeile grunt.registerTask(‚default‘, [‚requirejs‘, ‚less‘]);, werden sowohl RequireJS als auch Less ausgeführt, wenn Sie nur grunt auf der Kommandozeile angeben.

Ausblick

Die Möglichkeiten, die Sie hier kennengelernt haben, stellen nur einen kleinen Ausschnitt des Funktionsumfangs von Grunt und der verfügbaren Plug-ins dar. Sie können beispielsweise Dateien kopieren, Dateien oder ganze Verzeichnisse löschen oder den Quellcode Ihrer Applikation durch JSLint auf bekannte Anti-Patterns untersuchen lassen.

Sobald Sie in Ihrem Projekt Aufgaben entdecken, die sich wiederholen, sollten Sie prüfen, ob sich diese Aufgaben beispielsweise mit Grunt automatisieren lassen.

Aufmacherbild: Cogwheel Gear Mechanism on Red Button on Black Computer Keyboard von iStockphoto / Urheberrecht: Tashatuvango

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -