Erste Schritte mit Gulp Starterpaketen

Das Gespräch über CodeKit und die Vorteile, die es für Front-End-Entwickler bietet, ist auch kurz nach einem Beitrag und den Vorteilen, die etwas wie Gulp bietet, gekommen.

Ein Post über den Unterschied zwischen den beiden, warum Sie vielleicht einen über dem anderen haben möchten, und die Vor- oder Nachteile von beidem kann sein Post sein.

Aber dafür möchte ich die Starterpakete nehmen, über die ich in Bezug auf Gulp geschrieben habe, und ein einfaches Beispiel für eine Starter-Gulp-Datei geben und zeigen, wie Sie sie in Ihren WordPress-Projekten verwenden können.

Erste Schritte mit Gulp

Erstens bin ich ein Fan von Homebrew, also verwende ich es, wenn es um die Verwaltung von Paketen geht, die nicht Teil des Mac App Store sind. Dies macht das Installieren, Aktualisieren und Deinstallieren von Paketen viel einfacher.

Wenn Sie meinen Leitfaden zu Homebrew noch nicht gelesen haben, tun Sie dies bitte, da der Rest dieses Beitrags davon ausgeht, dass Sie ihn installiert haben.

1 Installieren Sie Gulp

Wenn Sie Homebrew installiert haben, stellen Sie sicher, dass alles gut aussieht und auf dem neuesten Stand ist. Ich habe eine vollständige Anleitung zum Einrichten von Gulp auf Ihrem lokalen Computer.

Wenn Sie dieses Setup also noch nicht haben, sehen Sie sich diesen Beitrag an, um zu erfahren, wie es geht.

2 Schreiben Sie Ihre Gulp-Konfigurationsdatei, Teil 1

Um eine Gulp-Konfigurationsdatei zu initialisieren, geben Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts in Ihrem Terminal ein:

Einfach, nicht wahr?

Dadurch wird eine leere gulpfile.js im Stammverzeichnis Ihres Projekts erstellt. Als nächstes ist es an der Zeit, die Datei zu bearbeiten.

Für diesen Beitrag werde ich vier Pakete verwenden, die ich zuvor skizziert habe:

• Schluck
• Schluck-Sass
• Schluck-Bild
• Schluck-hässlich

Jede dieser Aufgaben ist für das Transpilieren von Sass, das Optimieren von Bildern und das Minimieren von JavaScript verantwortlich.

Aufgaben, die Sie über die Befehlszeile ausführen möchten, sollten keine Leerzeichen enthalten.

Um die grundlegenden Aufgaben so einzurichten, dass Sie sie über die Befehlszeile ausführen können, müssen Sie Folgendes tun:

Sass

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Bilder

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Sie einzeln ausführen

Wenn Sie diese Aufgaben einzeln ausführen, müssen Sie jedes Mal Folgendes in die Konsole eingeben, wenn Sie beispielsweise Ihre Sass-Dateien transpilieren und Ihre JavaScript-Dateien minimieren möchten:

Aber das wird schnell alt. Außerdem ist es weniger effizient, insbesondere wenn Sie eine Uhr so ​​einrichten können  , dass Ihre Aufgaben automatisch ausgeführt werden, wenn Sie eine Datei speichern.

2 Schreiben Sie Ihre Gulp-Konfigurationsdatei, Teil 2

Das Einrichten einer Uhr ist wahrscheinlich das Beste, was Sie tun können, wenn es darum geht, mit Gulp Zeit zu sparen.

Beobachten Sie Dateien und unternehmen Sie etwas, wenn sich eine Datei ändert. Dies gibt immer einen EventEmitter zurück, der change Ereignisse ausgibt.

Das Einrichten einer Uhr ist einfach. Es ist ähnlich wie eine Aufgabe (tatsächlich erfordert es eine Aufgabe), aber es hat auch spezielle Argumente. Um eine Überwachungsaufgabe hinzuzufügen, die Sass, JavaScript und Bilder handhabt, richten Sie Folgendes in Ihrer gulpfile.js ein:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Führen Sie dann einfach die Aufgabe aus :

Von hier aus wird die Aufgabe jedes Mal, wenn Sie eine Sass-Datei oder eine JavaScript-Datei speichern oder eine Änderung an einem Bild vornehmen, automatisch ausgelöst und die Arbeit der definierten Aufgabe ausgeführt. Beachten Sie, dass dies ständig in seinem Thread ausgeführt wird, sodass Sie eine neue Terminal-Registerkarte oder ein neues Fenster öffnen müssen, wenn Sie zusätzliche Arbeit erledigen müssen.

Ein Hinweis zu Versionen

In früheren Versionen von Gulp akzeptierte das zweite Argument für die Watch-Funktion ein Array; Die neueste Version erfordert jedoch eine tatsächliche Funktion (die Sie oben darin sehen können, dass ich series deklariert habe ).

Kurz gesagt, Gulp 4 ermöglicht eine sequentielle Ausführung, die über series erfolgt, und eine parallele Ausführung (die die Parallelfunktion verwenden kann). Diese gehen über den Rahmen dieses Beitrags hinaus, da dies lediglich dazu gedacht ist, Ihnen den Einstieg zu erleichtern.

Sobald Sie fertig sind, sollten Sie viel mehr Automatisierung in Ihrem Build-Prozess haben.