Gulp – Ein Toolkit zur Automatisierung schmerzhafter Aufgaben in der Entwicklung
Schluck ist nützlich für die Automatisierung folgender Aufgaben:
- Kompilieren von JS- und CSS-Dateien
- Aktualisieren der Browserseite beim Speichern einer Datei
- Führen Sie einen Komponententest durch
- Code-Analyse
- Kopieren geänderter Dateien in ein Zielverzeichnis
Um alle Dateien zu verfolgen, die Sie zum Erstellen einer Gulp-Datei, zum Entwickeln Ihres Automatisierungstools oder zum Automatisieren von Aufgaben benötigen, müssen Sie eine generieren package.json Datei. Die Datei enthält im Wesentlichen eine Erläuterung, was sich in Ihrem Projekt befindet und welche Abhängigkeiten Sie benötigen, damit Ihr Projekt funktioniert.
In diesem Tutorial erfahren Sie, wie Sie Gulp installieren und einige grundlegende Aufgaben für Ihre Projekte automatisieren. Wir werden npm verwenden – was für Node Package Manager steht. Es ist installiert mit Node.jsund Sie können überprüfen, ob Sie Nodejs und npm bereits installiert haben mit:
# node --version # npm --version
Wenn Sie es noch nicht auf Ihrem System installiert haben, empfehlen wir Ihnen, das Tutorial zu lesen: Installieren Sie die neuesten Nodejs und die NPM-Version in Linux-Systemen.
So installieren Sie Gulp unter Linux
Installation von Schluck-Cli kann mit vervollständigt werden asl mit dem folgenden Befehl.
# npm install --global gulp-cli
Wenn Sie das installieren möchten Schluckmodul lokal (nur für das aktuelle Projekt) können Sie die folgenden Anweisungen verwenden:
Erstellen Sie ein Projektverzeichnis und navigieren Sie darin:
# mkdir myproject # cd myproject
Verwenden Sie als Nächstes den folgenden Befehl, um Ihr Projekt zu initialisieren:
# npm init
Nachdem Sie den obigen Befehl ausgeführt haben, werden Ihnen eine Reihe von Fragen gestellt, um Ihrem Projekt einen Namen, eine Versionsbeschreibung und andere zu geben. Bestätigen Sie abschließend alle von Ihnen angegebenen Informationen:
Jetzt können wir das installieren Schluck Paket in unserem Projekt mit:
# npm install --save-dev gulp
Das --save-dev Option sagt asl um die zu aktualisieren package.json Datei mit dem neuen devDependencies.
Beachten Sie, dass devDependencies müssen während der Entwicklung aufgelöst werden, während Abhängigkeiten während der Laufzeit. Da gulp ein Tool ist, das uns bei der Entwicklung hilft, muss es zur Entwicklungszeit behoben werden.
Erstellen Sie eine Gulp-Datei
Jetzt erstellen wir eine gulpfile. Aufgaben, die wir ausführen möchten, befinden sich in dieser Datei. Es wird automatisch geladen, wenn Sie das verwenden Schluck Befehl. Erstellen Sie mit einem Texteditor eine Datei mit dem Namen gulpfile.js. Für dieses Tutorial erstellen wir einen einfachen Test.
Sie können den folgenden Code in Ihre einfügen gulpfile.js::
var gulp = require('gulp');
gulp.task('hello', function(done) {
console.log('Hello world!');
done();
});
Speichern Sie die Datei und versuchen Sie nun, sie auszuführen mit:
# gulp hello
Sie sollten das folgende Ergebnis sehen:
Der obige Code bewirkt Folgendes:
- var gulp = require (‘gulp’); – Importiert das Gulp-Modul.
- gulp.task (‘Hallo’, Funktion (erledigt) { – Definiert eine Aufgabe, die über die Befehlszeile verfügbar ist.
- console.log (‘Hallo Welt!’); – druckt einfach “Gelbe Welt!”Auf den Bildschirm.
- getan(); – Wir verwenden diese Rückruffunktion, um gulp anzuweisen, dass unsere Aufgaben abgeschlossen sind.
Natürlich war das Obige nur ein Beispiel, um zu zeigen, wie das gulpfile.js kann organisiert werden. Wenn Sie die verfügbaren Aufgaben von Ihrem anzeigen möchten gulpfile.jskönnen Sie den folgenden Befehl verwenden:
# gulp --tasks
Gulp Plugins
Schluck Es stehen Tausende von Plugins zur Verfügung, die alle unterschiedliche Funktionen bieten. Sie können sie unter überprüfen Gulps Plugin Seite.
Unten werden wir die verwenden minify-html Plugin in einem praktischeren Beispiel. Mit der folgenden Funktion können Sie HTML-Dateien minimieren und in einem neuen Verzeichnis ablegen. Aber zuerst werden wir die installieren gulp-minify-html Plugin:
# npm install --save-dev gulp-minify-html
Sie können Ihre machen gulpfile.js sieht aus wie das:
# cat gulpfile.js
Beispielausgabe
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");
// task
gulp.task('minify-html', function (done) {
gulp.src('./src/*.html') // path to your files
.pipe(minifyHtml())
.pipe(gulp.dest('./dest'));
done()
});
Anschließend können Sie HTML-Dateien mit den folgenden Befehlen minimieren.
# gulp minify-html # du -sh /src dest/
Fazit
Schluck ist ein nützliches Toolkit, mit dem Sie Ihre Produktivität verbessern können. Wenn Sie an diesem Tool interessiert sind, empfehle ich Ihnen dringend, die verfügbare Dokumentationsseite zu überprüfen Hier.
