Ein paar Gulp-Pakete für den Anfang

Software wie Gulp und andere Dienstprogramme sind nicht neu. Für diejenigen, die sie noch nie benutzt haben, kann der Einstieg etwas entmutigend sein (aber das sollte es wirklich nicht sein).

Im Vergleich zu Tools wie CodeKit (die ich je nach Projekt immer noch mag und empfehle) haben sie etwas mehr Aufwand, um sie einzurichten, zu konfigurieren und einsatzbereit zu machen.

Aber sobald Sie alles eingerichtet haben, kann es mit einem verteilten Team unabhängig vom Betriebssystem sehr nützlich sein und dazu beitragen, Ihren Build-Prozess etwas robuster zu machen.

Das ist aber nicht Sinn und Zweck des Posts. Stattdessen finden Sie hier eine Liste mit einigen Paketen für den Anfang.

Betrachten Sie sie so: Wenn Sie nach Möglichkeiten suchen, mit Sass, JavaScript und Bildoptimierung zu arbeiten, sind dies gute Bibliotheken.

Gulp-Pakete für den Anfang

Bevor ich in jedes der folgenden Pakete springe, möchte ich darauf hinweisen, dass es wichtig ist, jede der verlinkten Seiten zu lesen. Die Dokumentation hilft beim Durchlaufen der Optionen, die die Bibliotheken bieten, die der von mir bereitgestellte Code nicht zeigt.

Das heißt, kopieren Sie nicht einfach das, was ich bereitgestellt habe, und fügen Sie es ein. Verwenden Sie es als Ausgangspunkt, aber lesen Sie auch die Dokumentation durch. Vielleicht finden Sie nichts Neues.

Andererseits werden Sie möglicherweise feststellen, dass es Optionen zum Optimieren Ihres speziellen Projekts gibt.

1 Sass

Sie können sich dafür entscheiden, mit Less zu arbeiten (ich bin weder hier noch dort, wirklich), aber ich tendiere dazu, Sass zu bevorzugen. Daher verwende ich eine Bibliothek, gulp-sass, speziell zum Kompilieren von Sass-Dateien in CSS.

Ich habe normalerweise ein Assets – Verzeichnis und innerhalb dieses Verzeichnisses befinden sich einige Unterverzeichnisse für Bilder, Stile und Skripte.

Innerhalb des Styles- Verzeichnisses habe ich zwei Unterverzeichnisse:

1. scss
2. css

Ich bewahre alle meine SCSS-Dateien im jeweiligen Verzeichnis auf und verwende dann gulp-sass, um die kompilierten Dateien in CSS auszugeben.

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

Von dort aus füge ich die CSS-Dateien mithilfe der erforderlichen WordPress-API-Funktion in die Warteschlange ein .

2 JavaScript-Minifizierung

An dieser Stelle wurden die Vorteile der Minimierung von JavaScript-Dateien immer wieder bewiesen, daher werde ich diesen Punkt nicht weiter ausführen.

Es gibt einige Pakete, die ich ausprobiert habe, wenn es um die Arbeit mit der JavaScript-Minifizierung geht, und gulp-uglify ist dasjenige, das ich am liebsten verwende.

Erinnern Sie sich an den vorherigen Abschnitt, dass ich mein Assets- Verzeichnis und darin mein Unterverzeichnis scripts habe. Dieses Verzeichnis enthält ein eigenes Unterverzeichnis: dev.

Ich nehme die JavaScript-Dateien, die sich in dev befinden, und gebe sie in das Stammverzeichnis des Skriptverzeichnisses aus .

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

Von dort aus füge ich sie wie oben mit derselben WordPress-API-Funktion in die Warteschlange ein .

3 Bildoptimierung

Schließlich ist eine Sache, die einen großen Beitrag dazu leisten kann, dass Ihre Seite(n) schnell geladen werden, sicherzustellen, dass Ihre Bild-Assets optimiert sind.

Sicher, es gibt einige Tools, die Sie manuell verwenden können, aber wenn Sie häufig Bild-Assets hinzufügen, ändern oder modifizieren und den Build-Prozess der Optimierung automatisieren möchten, dann empfehle ich die Verwendung von gulp-imagemin.

[Bild]

Es gibt einige Abhängigkeiten für diese spezielle Bibliothek, daher müssen Sie sicherstellen, dass sie ebenfalls enthalten sind. Diese beinhalten

• Picture-in-Gifsicle,
• imagein-jpegtran,
• Bildoptimierung,
• imagein-svgo.

Diese können manuell zu Ihren Konfigurationsdateien hinzugefügt, über die Befehlszeile oder anderweitig installiert werden. Stellen Sie auf jeden Fall sicher, dass Sie sie haben, bevor Sie versuchen, Ihre Bilder zu optimieren.

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

Beachten Sie aus dem obigen Code (und dem, was ich zuvor erwähnt habe), dass sich mein Bilderverzeichnis in Assets befindet. Wenn ich also die Aufgabe wie oben erwähnt ausführe, werden alle unterstützten Bildtypen an diesem Ort optimiert.

Paketdateien, Gulp-Dateien und all das?

Wenn Sie neu bei Gulp, Node oder anderen Build-Systemen sind, dann gibt es ein bisschen mehr zu besprechen, wie Sie Node und Gulp installieren und einrichten.

Ich habe mich entschieden, das vorerst zu überspringen, da es eine Menge Dokumentation dazu gibt, aber vielleicht schaue ich mir an, was wir verwenden, wenn wir dies in unsere Projekte integrieren.