Share
Was ist Gulp? Eine Beschreibung ist, dass Gulp ein Task Runner ist. Ein anderes wäre, dass es ein Toolkit für die Automatisierung zeitaufwändiger Aufgaben ist.
Wie auch immer Sie es nennen wollen, es gibt ein Merkmal, das wahr bleibt: Automatisierung. Lass uns etwas tiefer graben ...
Grundsätzlich verwenden Sie Gulp, um Dinge zu automatisieren, die Sie normalerweise manuell erledigen müssten, z. B. das manuelle Kompilieren von Sass, das manuelle Optimieren von Bildern, das manuelle Aktualisieren Ihrer Seite im Browser usw..
Nun, diese drei Aktionen können zu unabhängigen Aufgaben zusammengefasst werden. Dann würden Sie diese Aufgaben übernehmen und Gulp automatisch ausführen lassen. Deshalb werden Werkzeuge wie Gulp und Grunt Taskläufer genannt.
Ein sehr großer Unterschied zwischen Gulp und den anderen Task-Läufern ist die Art und Weise, wie Dateioperationen ausgeführt werden. Gulp leitet im Wesentlichen einen Datenstrom von einem Plugin zum nächsten weiter, ohne diesen Stream tatsächlich in eine temporäre Datei zwischen diesen Aufgaben zu schreiben. Das nennt man Piping oder Streaming.
Wenn Sie im Internet nach einer Definition für Rohrleitungen suchen, werden Sie wahrscheinlich etwas sehr Technisches erhalten. Also werde ich versuchen, es etwas zu vereinfachen. Ein Gulp-Workflow arbeitet mit mehreren verschiedenen Plugins, die verschiedene Vorgänge für bestimmte Dateien ausführen.
Um Ihnen ein Beispiel zu geben, nimmt das Sass-Plugin eine Sass- oder SCSS-Datei und kompiliert diese in eine CSS-Datei. Das Uglify-Plugin verwendet eine normale JavaScript-Datei und minimiert diese.
Beim Piping ist es so, dass Sie eine Reihe von Dateien nehmen und sie durch eine Reihe von Plugins oder durch ein Plugin ausführen können. Und Sie würden am Ende einen anderen Dateityp bekommen, genau das, was ich mit dem Sass-Plugin gesagt habe. Sie beginnen mit einer SCSS-Datei und am Ende erhalten Sie eine CSS-Datei.
Normalerweise schreiben diese Arten von Task-Läufern temporäre Dateien auf die Festplatte. Nun, Gulp macht das nicht - es verwendet Datenströme.
Der Inhalt dieser Datei wird also tatsächlich in einem Puffer gespeichert - es handelt sich im Wesentlichen um einen Datenstrom. Und es wird nur vom Plugin an das Plugin weitergegeben, bis es sein endgültiges Ziel erreicht. Und zwischen diesen Plugins durchläuft dieser Stream einige Änderungen.
Sie können zum Beispiel mit den SCSS-Dateien beginnen und sie an das Sass-Plugin weiterleiten. Nun akzeptiert das Sass-Plugin SCSS-Dateien und gibt CSS-Dateien zurück. Der Datenstrom, den Sie nach dem Sass-Plugin erhalten, unterscheidet sich daher von dem, der in das Plugin eingegeben wurde.
Und dann können Sie damit mehr tun. Vielleicht führen Sie sie durch einen Autoprefixer, richtig? Gulp nimmt also diesen Datenstrom und führt ihn durch das Autoprefixer-Plugin, das CSS-Dateien akzeptiert. Diese CSS-Datei wird auch zurückgegeben, aber dazwischen werden alle erforderlichen Herstellerpräfixe hinzugefügt. So ändert sich auch der Inhalt dieser Datei.
Zum Schluss können Sie es beispielsweise verkleinern oder auf eine Festplatte schreiben. So funktioniert das Piping. Sie übergeben Daten am Anfang des Datenstroms und am Ende erhalten Sie einen anderen Datentyp. In der Mitte befinden sich diese Punkte, die bestimmte Vorgänge für diesen Datenstrom ausführen.
Hoffentlich haben Sie jetzt ein grundlegendes Verständnis davon, was Gulp ist. Um ein klareres Bild zu erhalten, können Sie den vollständigen Kurs, den Web Designer's Guide für Gulp, in Anspruch nehmen, in dem wir die Funktionsweise von Gulp in einer sehr viel detaillierteren Form durchgehen.
Sie können diesen Kurs mit einem Abonnement von Envato Elements sofort absolvieren. Für eine einmalige geringe monatliche Gebühr erhalten Sie nicht nur Zugriff auf diesen Kurs, sondern auch auf unsere wachsende Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+.
Darüber hinaus erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 440.000 kreativen Elementen. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.
Accentsconagua