Gulp - ein Toolkit zur Automatisierung schmerzhafter Aufgaben in der Entwicklung

Gulp ist ein kleines Toolkit, das sich wiederholende Aufgaben automatisiert. Diese sich wiederholenden Aufgaben sind in der Regel das Kompilieren von CSS- und JavaScript-Dateien, oder im Grunde, wenn Sie ein Framework verwenden, das mit nicht standardmäßigen JavaScript/CSS-Dateien arbeitet, sollten Sie ein Automatisierungstool verwenden, das diese Dateien erfasst, sie zusammenpackt und alles so kompiliert, dass Ihr Browser es leicht verstehen kann.

Gulp ist nützlich für die Automatisierung folgender Aufgaben:

Kompilieren von JS- und CSS-Dateien
Aktualisieren der Browserseite beim Speichern einer Datei
Ausführen eines Komponententests
Code-Analyse
Kopieren geänderter Dateien in ein Zielverzeichnis

Um den Überblick über alle Dateien zu behalten, die Sie zum Erstellen einer gulp-Datei, zum Entwickeln Ihres Automatisierungstools oder zum Automatisieren von Aufgaben benötigen, müssen Sie eine package.json Datei generieren. Die Datei enthält im Wesentlichen eine Erklärung, 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 wie Sie einige grundlegende Aufgaben für Ihre Projekte automatisieren können. Wir werden npm verwenden – was für Node Package Manager steht. Es wird mit Node.js installiert, und 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, empfehle ich Ihnen, das Tutorial zu lesen: Installieren Sie die neueste Nodejs- und NPM-Version in Linux-Systemen.

So installieren Sie Gulp unter Linux

Die Installation von gulp-cli kann mit npm mit dem folgenden Befehl abgeschlossen werden.

# npm install --global gulp-cli

Wenn Sie das gulp-Modul lokal installieren möchten (nur für das aktuelle Projekt), können Sie die folgenden Anweisungen befolgen:

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 Informationen, die Sie gemacht haben:

Nun können wir das gulp-Paket in unserem Projekt installieren mit:

# npm install --save-dev gulp

Die Option --save-dev weist npm an, die package.json Datei mit den neuen devDependencies zu aktualisieren.

Beachten Sie, dass devDependencies während der Entwicklung aufgelöst werden müssen, während Abhängigkeiten während der Laufzeit aufgelöst werden müssen. Da Gulp ein Tool ist, das uns bei der Entwicklung hilft, muss es zur Entwicklungszeit gelöst werden.

Gulp-Datei erstellen

Lassen Sie uns nun eine gulpfile erstellen. Aufgaben, die wir ausführen möchten, befinden sich in dieser Datei. Es wird automatisch geladen, wenn der Befehl gulp verwendet wird. Erstellen Sie mit einem Texteditor eine Datei mit dem Namen gulpfile.js. Für die Zwecke dieses Tutorials werden wir einen einfachen Test erstellen.

Sie können den folgenden Code in Ihre gulpfile.js einfügen:

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:

Hier ist, was der obige Code tut:

var gulp=require('gulp'); – importiert das gulp-Modul.
gulp.task('hello', function(done) { – definiert eine Aufgabe, die über die Befehlszeile verfügbar sein wird.
console.log('Hallo Welt!'); – druckt einfach "Hellow world!" auf den Bildschirm.
done(); – Wir verwenden diese Callback-Funktion, um Gulp anzuweisen, dass unsere Aufgaben abgeschlossen sind.

Natürlich war das oben Gesagte nur ein Beispiel, um zu zeigen, wie die gulpfile.js organisiert werden kann. Wenn Sie die verfügbaren Aufgaben aus Ihrem gulpfile.js anzeigen möchten, können Sie den folgenden Befehl verwenden:

# gulp --tasks

Gulp-Plugins

Gulp hat Tausende von Plugins zur Verfügung, die alle unterschiedliche Funktionen bieten. Sie können sie auf der Plugin-Seite von Gulp überprüfen.

Im Folgenden werden wir das minify-html-Plugin in einem praktischeren Beispiel verwenden. Mit der folgenden Funktion können Sie HTML-Dateien minimieren und in einem neuen Verzeichnis ablegen. Aber zuerst werden wir das gulp-minify-html-Plugin installieren:

# npm install --save-dev gulp-minify-html

Sie können Ihre gulpfile.js so aussehen lassen:

# cat gulpfile.js

Beispiel-Ausgabe

// 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/

Schlussfolgerung