Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Production-ready HTML5: Der perfekte Frontend Build

Production-ready HTML5: Der perfekte Frontend Build

Ob HTML, JavaScript oder CSS, in Frontend-Anwendungen gibt es sehr viel zu tun, damit Ihre Anwendungen in den produktiven Betrieb gehen können. gulp stellt ein einfaches, aber dennoch mächtiges Build-Framework bereit. Lernen Sie in diesem Talk, wie Sie Frontend-Anwendungen für Web, Desktop und Mobile kompilieren und alles automatisieren, um Ihre Performance auf ein neues Level zu heben und manuelle Fehler zu beseitigen.

Thorsten Hans

March 02, 2016
Tweet

More Decks by Thorsten Hans

Other Decks in Technology

Transcript

  1. Was Sie erwartet • GulpJS 101 • Frontend Apps ”bauen”

    • Mobile Apps / Desktop Apps / Web Apps • Viele Node Packages (npm) 1 Was Sie nicht erwartet • JavaScript Intro Production-ready HTML5 Der perfekte Build mit GulpJS
  2. Talking Points • Build Tools in der .NET Welt betrachtet

    • Build Tools für Web Projekte und SPAs • Was ist dieses Gulp und was kann es? • Hands On – Vom reinen Source Code bis in die Produktionsumgebung 4
  3. 8

  4. Nachteile der Tools wie MSBuild • JavaScript Optimierungen grundsätzlich möglich

    • Schlecht lesbar • Sogar hoher Wiedereinarbeitungsaufwand • Allerdings lange Adaptionszyklen für – “neue” Web Frameworks – Sprachen 9
  5. Anforderungen für SPAs • Optimieren • Minimieren • Zusammenführen •

    uvm…. • Für Sprachen wie – HTML – JavaScript – CSS 10
  6. Adaption von neuen Sprachen - Frameworks • Frameworks wie –

    Angular2 – React • Sprachen wie – TypeScript – Jade – LESS – SCSS 11
  7. Gulp • Node.js basierter Task-Runner • Asynchrone Ausführung • Verarbeitung

    von Dateien und Ordnern auf Grundlage von Streams • Installation mit dem Node Package Manager (npm) • Aktuell verfügbar in Version 3 – Version 4.0 ist in Arbeit – Kann bereits jetzt in seperatem Branch angesehen und verwedent werden • Enormes Plugin Ökosystem 14
  8. 15