Website-Suche

Gulp – Ein Toolkit zur Automatisierung schmerzhafter Aufgaben in der Entwicklung

Gulp ist ein kleines Toolkit, das sich wiederholende Aufgaben automatisiert. Bei diesen sich wiederholenden Aufgaben handelt es sich normalerweise um das Kompilieren von CSS- und JavaScript-Dateien. Wenn Sie ein Framework verwenden, das nicht standardmäßige JavaScript-/CSS-Dateien verarbeitet, sollten Sie grundsätzlich ein Automatisierungstool verwenden, das diese Dateien erfasst, zusammenpackt und alles kompiliert, damit Ihr Browser es leicht verstehen kann Es.

Gulp eignet sich zur Automatisierung folgender Aufgaben:

  • Kompilieren von JS- und CSS-Dateien
  • Aktualisierung der Browserseite, wenn Sie eine Datei speichern
  • Führen Sie einen Unit-Test durch
  • Code-Analyse
  • Geänderte Dateien in ein Zielverzeichnis kopieren

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 darüber, 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 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 mithilfe des folgenden Befehls 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 verwenden:

Erstellen Sie ein Projektverzeichnis und navigieren Sie darin:

mkdir myproject
cd myproject

Als nächstes verwenden Sie 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 usw. zu geben. Bestätigen Sie abschließend alle von Ihnen gemachten Angaben:

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

npm install --save-dev gulp

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

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

Erstellen Sie eine Gulp-Datei

Jetzt erstellen wir eine gulpfile. Aufgaben, die wir ausführen möchten, werden in dieser Datei gefunden. Es wird automatisch geladen, wenn der gulp-Befehl verwendet wird. 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 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:

Folgendes bewirkt der obige Code:

  • var gulp=require(‘gulp’); – importiert das gulp-Modul.
  • gulp.task(‘hello’, function(done) { – definiert eine Aufgabe, die über die Befehlszeile verfügbar ist.
  • console.log(‘Hello world!’); – gibt einfach „Hello world!“ auf dem Bildschirm aus.
  • done(); – wir verwenden diese Rückruffunktion, um gulp mitzuteilen, dass unsere Aufgaben abgeschlossen sind.

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

gulp --tasks

Gulp-Plugins

Gulp verfügt über Tausende von Plugins, die alle unterschiedliche Funktionen bieten. Sie können sie auf der Plugin-Seite von Gulp überprüfen.

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

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

Sie können Ihre gulpfile.js so gestalten:

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 verkleinern.

gulp minify-html
du -sh /src dest/

Abschluss

Gulp ist ein nützliches Toolkit, das Ihnen helfen kann, Ihre Produktivität zu verbessern. Wenn Sie an diesem Tool interessiert sind, empfehle ich Ihnen dringend, die Dokumentationsseite zu lesen, die hier verfügbar ist.