Heute ist die Webentwicklung eine der beliebtesten Programmierbereiche. Jeden Tag erstellen Tausende von Entwicklern neue Webprojekte mit einer Vielzahl von Tools und Technologien. Ein solches Werkzeug ist Schluck. Es ist ein Tool, mit dem Sie die täglichen Aufgaben eines Entwicklers automatisieren können, z. B. das Kompilieren von SCSS in CSS, das Komprimieren und Minimieren von JavaScript-Dateien und vieles mehr.
Bevor Sie Gulp verwenden, müssen Sie es auf Ihrem Computer installieren. Das Herunterladen und Installieren einer Datei ist jedoch nicht immer ausreichend. Möglicherweise benötigen Sie eine globale Installation von Gulp, damit sie von jedem Ordner auf Ihrem Computer aus zugänglich ist. Dies ermöglicht es Ihnen, Schluck in jedem Projekt zu verwenden, unabhängig von seinem Standort.
In diesem Artikel erfahren Sie, wie Sie Gulp global mit ein paar einfachen Schritten installieren. Stellen Sie sicher, dass Sie die richtige Zugriffsebene für die Installation von Paketen auf Ihrem Computer haben und für die Verwendung dieser Pakete konfiguriert sind.
Wie installiere ich Schluck global
Befolgen Sie diese Schritt-für-Schritt-Anleitung, um Schluck global auf Ihrem Computer zu installieren:
- Wechseln Sie zur Eingabeaufforderung oder zum Terminal in Ihrem Betriebssystem.
- Geben Sie den folgenden Befehl ein, um Schluck global zu installieren:
npm install -g gulpgulp -vJetzt sind Sie bereit, Schluck zu verwenden, um Ihren Workflow zu automatisieren! Viel Erfolg bei der Entwicklung!
Überprüfen der Node-Installation.js
- Öffnen Sie eine Eingabeaufforderung oder ein Terminal.
- Geben Sie node -v ein und drücken Sie die Eingabetaste.
Wenn Sie Node installiert haben.js, Sie sehen die Versionsnummer des Knotens.js. Zum Beispiel:
v14.17.0Wenn Sie die Versionsnummer des Knotens sehen.js, dann Node.js ist bereits auf Ihrem Computer installiert und Sie können mit der Installation von Gulp fortfahren. Wenn Sie jedoch eine Fehlermeldung sehen oder nichts passiert, müssen Sie Node installieren.js.
Um Node zu installieren.js, besuchen Sie die offizielle Website von Node.js (https://nodejs.org ) und folgen Sie den Installationsanweisungen für Ihr Betriebssystem.
Installieren der gulp-cli
Schritt 1: Öffnen Sie ein Terminal oder eine Eingabeaufforderung.
Schritt 2: Geben Sie den Befehl ein npm install --global gulp-cli und drücken Sie die Eingabetaste. Dadurch wird gulp-cli global auf Ihrem System installiert.
Schritt 3: Warten Sie, bis der Installationsvorgang abgeschlossen ist. Möglicherweise benötigen Sie eine Administratorbestätigung.
Schritt 4: Überprüfen Sie, ob die Installation erfolgreich war, indem Sie den Befehl eingeben gulp --version und drücken Sie die Eingabetaste. Wenn alles richtig ist, sehen Sie die Version von gulp-cli, die auf Ihrem System installiert ist.
Jetzt haben Sie gulp-cli global installiert und sind bereit, es für die Verwaltung Ihrer Gulp-Projekte zu verwenden.
Hinweis: Wenn bei der Installation von gulp-cli Probleme auftreten, stellen Sie sicher, dass Sie Node installiert haben.js und npm (Node Package Manager).
Package erstellen.json
Um mit Schluck zu arbeiten, müssen Sie eine Package-Datei erstellen.json, das Informationen zu Ihrem Projekt und seinen Abhängigkeiten enthält. Führen Sie die folgenden Schritte aus, um diese Datei zu erstellen:
| Schritt | Das Team | Die Beschreibung |
|---|---|---|
| 1 | Öffnen Sie eine Eingabeaufforderung oder ein Terminal im Stammordner Ihres Projekts | Sie müssen sich im selben Ordner befinden, in dem sich Ihre Dateien für das Projekt befinden |
| 2 | Geben Sie Folgendes ein: npm init | Dieser Befehl startet den interaktiven Prozess zum Erstellen eines package.json |
| 3 | Beantworten Sie die Fragen, die im Terminal angezeigt werden | Sie werden nach Projektnamen, Version, Beschreibung, Autor und anderen Details gefragt. Sie können einige Fragen überspringen, indem Sie die Eingabetaste drücken. |
| 4 | Überprüfen Sie die erstellte package-Datei.json | Stellen Sie sicher, dass alle Daten in der Datei korrekt sind und mit Ihrem Projekt übereinstimmen |
Nachdem Sie diese Schritte abgeschlossen haben, wird eine Package-Datei erstellt.json, das alle notwendigen Daten enthält, um mit Gulp und seinen Plugins zu arbeiten.
Installieren von Abhängigkeiten
Stellen Sie sicher, dass Sie die folgenden Programme installiert haben, bevor Sie Schluck global installieren:
- Node.js: Dies ist die Hauptplattform, auf der Gulp läuft. Sie können Node herunterladen und installieren.js von der offiziellen Website: https://nodejs.org .
- NPM: NPM (Node Package Manager) ist ein Paketmanager für Node.js. Es wird automatisch zusammen mit Node installiert.js. Stellen Sie sicher, dass NPM installiert und ausgeführt wird, indem Sie an der Eingabeaufforderung den Befehl npm -v ausführen.
Wenn Sie bereits Node installiert haben.js und NPM, dann können Sie mit dem nächsten Schritt fortfahren.
Erstellen einer gulpfile.js
Nachdem Sie gulp global erfolgreich installiert haben, können Sie mit der Erstellung der gulpfile beginnen.js. Diese Datei enthält die Aufgaben, die wir mit gulp ausführen möchten.
1. Erstellen Sie einen neuen Ordner für das Projekt, falls noch kein neuer Ordner vorhanden ist. Es wird empfohlen, es mit dem Projektnamen für eine bessere Organisation zu benennen.
2. Erstellen Sie im erstellten Ordner eine neue Datei mit dem Namen gulpfile.js. Dies wird die Datei selbst sein, in der wir unsere Aufgaben für Gulp beschreiben werden.
3. Öffnen Sie die gulpfile-Datei.js in einem Texteditor.
4. In der gulpfile-Datei.js Beginnen Sie mit dem Anschließen des Gulp-Moduls:
const gulp = require('gulp');5. Erstellen Sie die erste Aufgabe, die beim Aufruf des Befehls gulp ausgeführt wird:
gulp.task('default', function()); 7. Speichern Sie die gulpfile-Datei.js.
Sie haben jetzt erfolgreich eine gulpfile erstellt.js und Sie können mit Schluck mit der Beschreibung und Ausführung von Aufgaben beginnen.
Aufgaben in Gulp ausführen
Um eine Aufgabe in Gulp zu erstellen, benötigen Sie:
- Erstellen Sie eine neue Datei mit der Erweiterung .js und laden Sie die erforderlichen Gulp-Plugins herunter.
- Verbinden Sie diese Plugins mit der Funktion require() in Ihre Datei.
- Definieren Sie Ihre Aufgabe mit dem Aufruf der Gulp-Methode.task() , indem Sie ihm den Namen der Aufgabe und die Funktion übergeben, die die Aufgabe ausführt.
- Innerhalb einer Aufgabenfunktion können Sie Schluckmethoden und Plugins verwenden, um Dateien wie src() und pipe() zu verarbeiten.
- Erstellen Sie schließlich eine Standardaufgabe, die beim Ausführen von Gulp durch Aufrufen der Gulp-Methode ausgeführt wird.task() mit dem Namen "default" und der Übergabe eines Arrays von Aufgaben, die ausgeführt werden sollen.
Ein Beispiel für eine Schluckaufgabe könnte folgendermaßen aussehen:
const gulp = require('gulp');const uglify = require('gulp-uglify');gulp.task('minify-js', function() );gulp.task('default', gulp.series('minify-js'));In diesem Beispiel haben wir eine Aufgabe mit dem Namen "minify-js" erstellt, die alle Dateien mit der Erweiterung enthält .js aus dem Ordner "src/js", komprimiert sie mit dem Uglify-Plugin und speichert das Ergebnis im Ordner "dist/js". Dann haben wir eine Standardaufgabe erstellt, die die "minify-js" -Aufgabe aufruft.
Führen Sie zum Ausführen einer Schluckaufgabe den Befehl Schluck aus, gefolgt vom Namen der Aufgabe. Um beispielsweise die Aufgabe "minify-js" auszuführen, führen Sie den Befehl gulp minify-js aus.
Sie können beliebig viele Aufgaben in Gulp erstellen und sie auf viele Arten kombinieren, um wiederholte Vorgänge zu automatisieren und Ihren Workflow zu verbessern.
