Frontend Build-Prozess mit Grunt

Grunt ist ein Tool, mit welchem sich wiederkehrende Aufgaben im Frontend automatisieren lassen. Das ganze basiert auf einem Ökosystem an Plugins, welche in einem Gruntfile.js konfiguriert und so an das jeweilige Projekt angepasst werden können.

grunt-logo

Zu diesem Blogpost gibt es ein Grunt Beispielprojekt auf GitHub, welches die nachfolgend beschriebenen Features abdeckt:

Zudem werden CSS und Javascript Sourcemaps unterstützt sowie Live Reloading im Browser.

github-logoGrunt Beispielprojekt auf GitHub

Quickstart!

Node installieren

Grunt basiert auf Node.js und lässt sich in ein paar Minuten installieren: http://gruntjs.com/getting-started Die Installation ist global und muss nur einmal gemacht werden. Danach steht Grunt für alle zukünftigen Projekte zur Verfügung.

Beispielprojekt auschecken

Erstelle einen neuen Order und checke mit GIT das Grunt Example Projekt aus:

$ git clone git@github.com:dmodalek/Grunt-Example.git .

 

Grunt Plugins herunterladen

Die benötigten Plugins sind im  package.json File definiert und können mit dem Node Package Manager automatisch heruntergeladen werden. Es wird ein neuer Order node_modules erstellt, welcher die Grunt Plugins beinhaltet.

$ npm install

 

Build Prozess starten

Danach kann der Grunt Build-Prozess gestartet werden.

$ grunt

 
Dies führt den Default Build Task aus. Fügt man den Parameter min hinzu, werden die Files nach dem Build auch noch minifiziert.

$ grunt min

 

grunt-terminal

Frontend Workflow mit Grunt

Nachdem Grunt erfolgreich durchgelaufen ist, befinden sich im Order built das generierte styles.css und scripts.js. Grunt befindet sich nun im Wartemodus und läuft erneut durch, sobald sich ein File ändert.

Live Reload

Mit Live Reload kann bei jeder Änderung automatisch der Browser aktualisiert werden, damit man sofort die Änderung sehen kann. Dabei wird die Seite nicht komplett aktualisiert, sondern nur das jeweilige File injiziert. So muss nicht immer zwischen Editor und Browser gewechselt werden, um Änderungen zu sehen.

Damit das funktioniert, muss noch eine Browserextension für Live Reload installiert werden.

grunt-live-reload

Sourcemaps

Sourcemaps erlauben es im im Browser die die ursprünglichen LESS und Javascript Files zu debuggen. Grunt erstellt dafür je ein Sourcemap File für CSS und Javascript. Der Browser erkennt die Sourcemap automatisch und zeigt in den Developer Tools das ursprüngliche File an.

grunt-sourcemaps

Wrap Up

Das war nur ein kurzer Überblick, Grunt bietet noch vieles mehr. Von der Sprite Generierung bis zum File Splitting basiert auf Anzahl CSS Selektoren gibt es alles.

Eine Liste alles Plugins gibt es unter http://gruntjs.com/plugins

Der wahrscheinlich grösste Vorteil von Grunt ist aber nicht ein einzelnes Plugin, sondern die Flexibilität. Ganz egal was für Anforderungen in einem Projekt auftauchen, Grunt hat wahrscheinlich ein Plugin dafür.

Ein Gedanke zu “Frontend Build-Prozess mit Grunt

  1. Dieser Post ist eine schöne Hands-On Einführung in die Automatisierungs-Power von Tools wie Grunt. Auch zu erwähnen ist das neuere Gulp, welches dies Konfigurations-Lastigkeit von Grunt mit chainable Code ersetzt und zur Zeit durch die Verwendung von Node.js Streams und Pipes viel schneller ist.

    Für das Auto-Loading der Gruntplugins in deinem Beispiel empfehle ich https://github.com/sindresorhus/load-grunt-tasks, es ist einiges smarter, als matchdep.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>