Advertisement
  1. Web Design
  2. Gulp.js

Kombinieren von Pattern Lab mit Gulp für einen verbesserten Workflow

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Arbeiten Sie und Ihr Team mit Styleguides? Haben Sie Dokumentation für Ihre Module? Wenn nicht, keine Panik. In diesem Tutorial zeige ich Ihnen, wie Sie Ihre Arbeitsweise mit Ihrem Team verbessern können. Wir werden die von Brad Frost und Dave Olsen vorgeschlagenen Konzepte untersuchen und mithilfe von Pattern Lab Styleguides erstellen, während Gulp die Assets verwaltet. Lass uns anfangen!

Was ist Gulp?

Gulp.js ist ein Streaming-Build-System und ein Task-Runner. Das wichtige Konzept ist, dass Sie Streams haben, wo Sie viele Dinge für Ihre Dateien definieren können. Es ist schneller als die manuelle Verwaltung, spart Nerven und viel Zeit. In diesem Tutorial werden wir alle unseren Sass-Dateien in eine Pipe (einen Prozess) einfügen:

  • Kompilieren von Sass zu CSS,
  • Verketten der CSS-Dateien,
  • Minimierung der Ausgabe,
  • und alles an einen anderen Ort verschieben

Weitere Informationen zu den Grundlagen von Gulp finden Sie in Kezz Braceys Anfängerhandbuch Die Befehlszeile für Webdesign: Automatisierung mit Gulp.

Was ist Pattern Lab?

Pattern Lab ist ein Konzept zur Erstellung der atomaren Entwurfssysteme. Erstellen von Modulen statt direktes Erstellen von Seiten. Es definiert mehrere Verbundteile:

  • atoms
  • molecules
  • organisms
  • templates
  • pages

Sie beginnen mit dem kleinsten Element und bauen es zu größeren Teilen aus, bis Sie ganze Seiten haben. Dieser Ansatz hilft Ihnen, Zeit zu sparen, zusammenzuarbeiten und eine solide Struktur zu gewährleisten.

Atoms

Atoms können nicht in kleinere Stücke zerlegt werden.

Dies sind die einfachsten Blöcke, einschließlich grundlegender Tags wie Listen, Farben, Schriftarten, Animationen usw.

Molecules

Molecules sind Gruppen verschiedener Elemente (atoms), die wie eine Einheit zusammenwirken.

Zum Beispiel ein Teaser mit einer Überschrift, einem Bild, einem Absatz und einem Link wie "Lesen Sie mehr". Jedes von diesen ist ein einzelnes Element, aber zusammen werden sie ein Molekül; Teil eines größeren, komplexeren Systems.

Organisms

Organisms sind Gruppen von Elementen (atoms und molecules) und funktionieren wie ein Abschnitt auf Ihrer Website.

Denken Sie zum Beispiel an einen Website-Header. Es ist ein größeres System, das aus Molekülen wie einer Suchform und einer Navigation aufgebaut ist, die beide wiederum aus kleineren Atomen bestehen.

patternlab header organismpatternlab header organismpatternlab header organism
Musterlabor-Header-Organismus, auf kleinem Bildschirm zu sehen

Schauen Sie sich die Online-UI-Demos an und machen Sie sich ein Bild vom gesamten System.

Lassen Sie die Magie geschehen!

Jetzt ist es an der Zeit, beide Systeme zu kombinieren und einen Workflow für Ihr Team zu erstellen. Pattern Lab wird uns unseren HTML-Code zur Verfügung stellen und die einfache Benutzeroberfläche bereitstellen. Gulp wird alle benötigten Assets verwalten.

Unsere Hauptmerkmale:

  • Sass-Compiling (Libsass)
  • Server (Browser-Sync)
  • Livereload
  • Minimieren (Javascript, CSS und Bilder)
  • Freigabe / Bereitstellung
    • Bump up die Version
    • Markieren
    • Push-Dateien und Tags zum Endpunkt
    • Übertragen Sie Dateien über rsync auf einen Server

Einführung

Um Gulp verwenden zu können, muss zunächst node.js auf Ihrem System vorhanden sein. Wenn Sie dies nicht tun, finden Sie Anweisungen zur Einrichtung in Kezz Braceys Befehlszeile für Webdesign: Zähmen von Paketen von Drittanbietern.

Beginnen wir mit der globalen Installation von Gulp.js. Geben Sie im Terminal Folgendes ein:

Jetzt müssen wir das Repository von Patternlab klonen, um eine Basis für die Arbeit zu erhalten.

Als nächstes benötigen wir eine Schluckdatei, um unsere Aufgaben einzurichten. Erstellen Sie eine gulpfile.js im Stammverzeichnis Ihres Projektordners. Danach benötigen wir eine Konfigurationsdatei, in der wir alle Pfade definieren. Erstellen Sie daher eine build.config.json in Ihrem Ordner.

Folgende Dateien werden ebenfalls benötigt:

  • .bowerrc
  • package.json
  • bower.json

Nach all diesen grundlegenden Schritten haben wir die grundlegende Projektstruktur. Beginnen wir nun damit, die Aufgaben für unseren Workflow zu erstellen.

Beginnen Sie mit dem Gulpfile

Oben in unserer Datei gulpfile.js benötigen wir jede Abhängigkeit. Wenn Sie ein Plugin installieren, müssen Sie es "require" und ihm einen Namen geben.

Beginnen Sie mit gulp und unserer Konfigurationsdatei für alle Pfade und Konfigurationen.

Während unseres Entwicklungsprozesses müssen wir unseren Code nicht minimieren (dies ist Zeitverschwendung, es sei denn, wir sind bereit zur Bereitstellung). Mit der folgenden production variablen können wir einige Aufgaben ein- und ausschalten. Sie werden dies später in Aktion sehen.

Mit der Einrichtung können wir nun verschiedene Aufgaben hinzufügen, die uns bei unserer Entwicklung helfen!

Aufgabe 1: Alle Assets bereinigen

Wenn Sie ein Bild aus dem Ordner "source/" löschen, finden Sie auch in "public/" eine Kopie des Bildes. Aufgrund dieser Duplizierung führen wir einen einfachen Schritt aus, um den Bildordner in "public/" zu bereinigen.

Aufgabe 2: Skripte verarbeiten

Für Bereitstellungszwecke ist es wichtig, nur eine Datei mit allen Skripten zu haben. Um dies zu erreichen, verwenden wir das Plugin gulp-concat und kombinieren alle unsere Skripte, um application.js zu erstellen. Wenn die variable production wahr ist, wird application.js hässlich und erhält einen neuen Namen: application.min.js.

Aufgabe 3: Schriftarten

Diese Aufgabe verschiebt alle Schriftarten in den öffentlichen Ordner. Nichts mehr.

Aufgabe 4: Bilder

Für diesen Schritt installieren wir das Plugin gulp-imagemin und benötigen es. Sobald wir dies getan haben, können wir damit Bilder minimieren. Dies spart Speicher und steigert die Leistung.

Wenn die variable production wahr ist, werden alle Bilder minimiert. Nachdem dies erledigt ist, verschieben wir sie in den Zielordner.

Aufgabe 5: Sass anfassen

Installieren und fordern wir die Abhängigkeiten gulp-sass und gulp-cssmin.

Jetzt nehmen wir alle Sass-Dateien und kompilieren sie mit dem Sass-Plugin zu CSS. Wenn die variable production wahr ist, erledigt cssmin seine Aufgabe.

Aufgabe 6: Pattern Lab Server

Pattern Lab verfügt über einen eigenen Server, den Sie mit einem einfachen Shell-Befehl starten können. Um diesen Befehl auszuführen, benötigen wir das Plugin gulp-shell.

An dieser Stelle kopieren wir den Styleguide-Ordner vom Kern in die public. Zu diesem Zeitpunkt sehen Sie im Browser ein solides Front-End.

Aufgabe 7: Server starten und Dateien überwachen

Pattern Lab verfügt über einen integrierten Server, aber Browser-Sync übernimmt das Einfügen von CSS-Änderungen ohne erneutes Laden der Seite.

Der Beobachter kümmert sich um Änderungen und löst die spezifischen Aufgaben aus. Danach aktualisiert die Browsersynchronisierung unsere Ansicht im Browser.

Wir geben die Dateien für den Watcher an und lösen die Aufgaben aus, die wir im Falle einer Änderung benötigen.

Aufgabe 8: Standardaufgabe

Das Schreiben von gulp in die Shell löst die Standardaufgabe aus. Bevor Gulp dies startet, wird die Bereinigung clean:before der Aufgabe, alle öffentlichen Dateien zu bereinigen.

Aufgabe 9: Den Prozess starten

Lassen Sie uns eine Aufgabe erstellen, die am Styleguide entwickelt werden soll, ohne jedoch die Ressourcen zu minimieren. Das löst die Browsersynchronisierung aus, erstellt alle Assets und startet den Watcher.

Aufgabe 10: Freigeben und Markieren

Für diesen Schritt benötigen wir einige neue Plugins.

  • Das Plugin gulp-bump dient zum Aktualisieren der Versionsnummer.
  • gulp-filter gibt uns eine bestimmte Datei des Streams.
  • Mit gulp-git können wir git-Anweisungen in gulp verwenden.
  • Und die gulp-tag-version dient zum Generieren des Tags.

Jetzt definieren Sie die Gulp-Task release, setzen die variable Produktion auf true (jetzt müssen wir sie minimieren) und öffnen den Stream. Sie müssen alle Dateien mit einer Versionsnummer nehmen, den Plugin-Bump verwenden und es ermöglichen, den Typ (Patch, Minor oder Major) über einen Parameter in der Shell zu definieren.

Wenn Sie die release-Task ohne Typ ausführen, benötigt gulp-bump einen Patch - x.x.1. Danach verschieben Sie die Dateien in das Stammverzeichnis und übernehmen die Änderungen. Jetzt ist es Zeit, ein neues Tag für das Projekt zu generieren. Die Datei package.json wird benötigt, um die aktuelle Versionsnummer für das neue Tag abzurufen.

Schließlich verschieben wir alle Dateien und Tags an den Ursprung und in den gewünschten Zweig.

Aufgabe 11: Deployment

Es ist möglich, alle Dateien über rsync auf einem Server bereitzustellen. Das ist super schnell und bequem. Geben Sie gulp deploy in Ihr Terminal ein und nach einigen Sekunden haben Sie das lokale Projekt auf dem Server. Sie müssen Ordner nicht manuell ziehen und ablegen. Automatisieren Sie alle Dinge. Sie definieren den Host und den Pfad des Ordners, den Sie in build.config.js bereitstellen möchten.

Final Gulpfile

Sie haben so viel Code geschrieben und hier ist das Endergebnis! Möglicherweise möchten Sie für jede Aufgabe eine eigene Datei haben. In diesem Fall können Sie diese gerne aufteilen. In diesem Fall wird der Einfachheit halber alles in einem einzigen Gulpfile angezeigt:

Konfigurationsdatei

Jetzt brauchen wir unsere Konfigurationsdatei, um die verschiedenen Pfade festzulegen. Diese Datei ist erforderlich, um die Pfade und die Konfiguration des Projekts zu verwalten:

Abschluss

Ich mag mit einer Kombination aus Gulp und Pattern Lab arbeiten. Ich habe in verschiedenen Teams gearbeitet und diese Grundlage für jedes Projekt geschaffen. Das Feedback jedes Teammitglieds war aufgrund seines leicht verständlichen Prozesses immer positiv. Jeder hat eine feste Oberfläche, kann das Modul auswählen und problemlos verwenden. Für Fragen oder Feedback lesen Sie bitte den Kommentarbereich unten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.