Seite wählen

Gulp und Bower: Automate Webdevelopment

von | Apr 23, 2015 | Development

NETWAYS DevelopmentDas Entwickeln von HTML Templates ist normalerweise ein sehr statisches unterfangen. Man braucht nicht viel mehr als einen Texteditor und einen Browser um ein Design zu entwerfen. Integriert man allerdings Gedanken zur Produktion bereits in der Designphase, steigt der Aufwand wesentlich. Denn folgende Dinge gilt es zu bedenken:

  • Kompilieren von Stylesheets wenn in LESS oder SASS geschrieben
  • Aufteilen von Inline-Styles und nachladbare Styles
  • Verwenden von JavaScript Frameworks
  • Optimiertes laden von JavaScript Code
  • Komprimieren von Bildern
  • Komprimieren von Styles oder Scripts

Die Liste ist lässt sich entsprechend fortführen. Um beim Release nichts zu vergessen, etablierten sich in den letzten Jahren einige Tools um einen Buildprozess für clientseitige Webanwendungen bereitzustellen und zu vereinfachen. Zwei davon möchte ich gerne vorstellen:

Bower

Bower
Bower ist ein Open Source Paketverwaltungstool für Webapplikationen. Dadurch können für eine Website oder eine SPA (Single Page Application) softwaretechnische Abhängigkeiten definiert werden. Vorraussetzung zur Installation ist Node.js. Dann bietet Bower allerdings die Möglichkeit, Frameworks auch einfache Art und Weise in der benötigten Version zu installieren. Bekannte Vertreter dieser Art sind z.B. jQuery, AngualarJS oder HTML5 Boilerplate.
Ein einfaches bower.json sieht folgendermaßen aus:

{
  "name": "Website",
  "version": "0.0.9",
  "authors": [
    "Eduart Zimmermann <ez@website.foo.bar>"
  ],
  "description": "Our website",
  "keywords": [
    "website"
  ],
  "license": "GPLv2+",
  "homepage": "https://website.foo.bar",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "directory": "./src/scripts/vendor",
  "dependencies": {
    "jquery": "latest",
    "uikit": "latest",
    "modernizr": "2.8.x"
  },
  "devDependencies": {
    "html5-boilerplate": "latest"
  }
}

Sind die Abhängigkeiten definiert, werden sie mit diesem Aufruf in der Applikation installiert:

# bower install

Gulp

GulpGulp Logo ist nun das eigentlich Build Tool und wird ebenfalls mit Node.js (npm) installiert. Gulp selbst führt dabei nur weitere Tasks aus.
 
Diese Tasks übernehmen dann spezielle Aufgaben, z.B.:

  • Kompilieren, komprimieren, unleserlich machen von Javascript oder Stylesheet
  • Ausführen von Tasks, wenn sich Dateien geändert haben
  • Erstellen von Scripts und Styles aus verschiedenen Dateien
  • Ausführen von Tests

Die Tasks werden in einem gulpfile.js definiert und können ganze Gruppen ausführen (z.B. wie GNU Make) um Tarballs zu erstellen oder die Applikation allgemein für den Produktivbetrieb vorzubereiten. Das alleine haut uns nun nicht wirklich aus den Socken, aber: In Kombination mit Node.js und Verwendung aller hier genannten Techniken bauen wir uns mit 1-2 Anweisungen die komplette Entwicklungsumgebung auf:

  • Node Package Abhängigkeiten installieren
  • Bower Abhängigkeiten installieren
  • Webserver starten
  • Styles und JavaScript nur kompilieren nur wenn sich Dateien verändert haben
  • Per LifeReload im Browser die Seite neu laden wenn Code geändert worden ist

Damit kommt die Kiste dann richtig in Fahrt und Webentwicklung wird wieder zu einer spannenden und dynamischen Geschichte.
Weitere Informationen:

Marius Hein
Marius Hein
Head of IT Service Management

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.

0 Kommentare

Einen Kommentar abschicken

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

Mehr Beiträge zum Thema Development

Mein PHP-Trainingsprojekt

PHP Schulung Vor kurzem haben wir begonnen, eine neue Programmiersprache zu lernen – PHP. In der ersten Woche haben wir mit den Grundlagen wie Variablen, Arrays, Schleifen begonnen und uns schrittweise zu komplizierterer Syntax wie Funktionen, Objekten und Klassen...

check_prometheus ist jetzt öffentlich verfügbar!

Monitoring ist komplex, das wissen wir hier bei NETWAYS leider zu gut. Deswegen laufen in der Infrastruktur auch mal gerne mehrere Tools für die Überwachung. Zwei gern gesehene Kandidaten sind dabei Icinga und Prometheus. Icinga und Prometheus erfüllen...