Gulp - Grundlagen

In diesem Kapitel lernen Sie einige Grundlagen zu Gulp kennen.

Was ist ein Build-System?

Ein Build-System wird als Sammlung von Aufgaben bezeichnet (zusammen als bezeichnet task runners), die die sich wiederholende Arbeit automatisieren.

Im Folgenden finden Sie eine Liste einiger Aufgaben, die mit dem Build-System ausgeführt werden können:

Kompilierung von Vorverarbeitungs-CSS und JavaScript.
Minimierung von Dateien zur Reduzierung der Größe.
Verkettung von Dateien zu einer.
Auslösen des Servers zum automatischen Neuladen.
Erstellung von Bereitstellungsbuilds zum Speichern der resultierenden Dateien an einem Speicherort.

Im modernen Front-End-Workflow arbeitet das Build-System mit 3 Komponenten:

Paketmanager
Preprocessors
Aufgabenläufer und Werkzeuge bauen

Paketmanager

Es wird verwendet, um das Installations-Upgrade zu automatisieren, erforderliche Abhängigkeiten zu entfernen, Bibliotheken und Pakete zu bereinigen, die in der Entwicklungsumgebung verwendet werden. Beispiel für Paketmanager sindbower und npm.

Präprozessoren

Präprozessoren sind sehr nützlich für einen effizienten modernen Workflow, indem sie eine optimierte Syntax und zusätzliche Funktionen hinzufügen, die in die Muttersprache kompiliert werden.

Einige der beliebtesten Präprozessoren sind -

CSS - SASS, LESS und Stylus.
JS - CoffeeScript, LiveScript, TypeScript usw.
HTML - Markdown, HAML, Slim, Jade usw.

Task Runners

Aufgabenläufer automatisieren Aufgaben wie die Konvertierung von SASS in CSS, minimieren die Dateien, optimieren Bilder und viele andere Aufgaben, die im Entwicklungsworkflow verwendet werden. Gulp ist einer der Task Runner in der modernen Front-End-Arbeitsumgebung und läuft auf Node.

Einrichten Ihres Projekts

Um Ihr Projekt auf Ihrem Computer festzulegen, erstellen Sie beispielsweise einen Ordner mit dem Namen "Arbeit". Der Arbeitsordner enthält folgende Unterordner und Dateien:

Src - Speicherort der vorverarbeiteten HTML-Quelldateien und -Ordner.
- Images - Enthält Bilder, die nicht komprimiert sind.
- Scripts - Enthält mehrere vorverarbeitete Skriptdateien.
- Styles - Enthält mehrere vorverarbeitete CSS-Dateien.
Build - Dieser Ordner wird automatisch erstellt und enthält die Produktionsdateien.
- Images - Enthält komprimierte Bilder.
- Scripts - Einzelne Skriptdatei, die minimierte Codes enthält.
- Styles - Einzelne CSS-Datei, die minimierte Codes enthält.
gulpfile.js - Es ist die Konfigurationsdatei, mit der unsere Aufgaben definiert werden.