Gulp – Ein Toolkit zur Automatisierung schmerzhafter Aufgaben in der Entwicklung

Schluck ist ein kleines Toolkit, das sich wiederholende Aufgaben automatisiert. Bei diesen sich wiederholenden Aufgaben werden normalerweise CSS- und JavaScript-Dateien kompiliert. Wenn Sie ein Framework verwenden, das sich mit nicht standardmäßigen JavaScript / CSS-Dateien befasst, sollten Sie ein Automatisierungstool verwenden, das diese Dateien erfasst, zusammenpackt und alles kompiliert, damit Ihr Browser es leicht verstehen kann es.

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
Überprüfen Sie die NodeJS- und NPM-Version
Überprüfen Sie die NodeJS- und 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:

NPM-Projekt initialisieren
NPM-Projekt initialisieren

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:

Führen Sie das Gulp-Projekt aus
Führen Sie das Gulp-Projekt aus

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
Listen Sie Gulp-Aufgaben auf
Listen Sie Gulp-Aufgaben auf

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/
HTML-Dateien minimieren
HTML-Dateien minimieren
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.

Similar Posts

Leave a Reply

Your email address will not be published.