Gulp und Bower: Automate Webdevelopment

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 Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.

IT-Marktentwicklung: Vorsichtiger Optimismus

Nach einer aktuellen Befragung von Entscheidern durch das Marktforschungsinstitut IDC wollen 43 Prozent der Unternehmen mehr in Informationstechnik investieren als vor einem Jahr. Interviewt wurden Entscheidungstraeger aus groesseren Unternehmen (52 Prozent > 1.000 Mitarbeiter) in Europa. 82 Prozent der Teilnehmer gaben an, sie hielten ihre IT-Ausgaben auf gleichem Niveau wie im Vorjahr oder hoeher. Als Motive dafuer werden am haeufigsten die Steigerung der Effizienz sowie die Optimierung von Prozessen angefuehrt. 41 Prozent der Befragten gaben allerdings an, dass ein schneller ROI (Return on Investment) ausschlaggebend sei. Laenderspezifisch ist der Umfrage zufolge Deutschland am meisten von der Konjunkturflaute betroffen. 47 Prozent der hiesigen Unternehmen gaben an, der Rueckgang habe sich auf ihre Organisation ausgewirkt.
Hinsichtlich der erwarteten Wiederbelebung zeigen die Deutschen dafuer den groessten Optimismus: 66 Prozent erwarten, dass sich die Lage im Laufe der naechsten zwoelf Monate bessert.

Julian Hein
Julian Hein
Executive Chairman

Julian ist Gründer und Eigentümer der NETWAYS Gruppe und kümmert sich um die strategische Ausrichtung des Unternehmens. Neben seinem technischen und betriebswirtschaftlichen Background ist Julian häufig auch kreativer Kopf und Namensgeber, beispielsweise auch für Icinga. Darüber hinaus ist er als CPO (Chief Plugin Officer) auch für die konzernweite Pluginstrategie verantwortlich und stösst regelmässig auf technische Herausforderungen, die sonst noch kein Mensch zuvor gesehen hat.