So minimieren Sie Ihr CSS mit gulp

In diesem Artikel werde ich eine einfache Möglichkeit zeigen, Ihre CSS-Dateien mithilfe von gulp automatisch zu minimieren. ?

Zu Beginn - was ist Schlucken?

Gulp ist ein JavaScript-Task-Runner, mit dem Sie Aufgaben wie…

  • Bündeln und Minimieren von Bibliotheken und Stylesheets.
  • Aktualisieren Sie Ihren Browser, wenn Sie eine Datei speichern.
  • Schnell laufende Unit-Tests.
  • Ausführen der Code-Analyse.
  • Less / Sass to CSS-Kompilierung.
  • Und vieles mehr!

Der Gulp-Workflow funktioniert wie folgt:

Wir können Aufgaben erstellen, die wir erfüllen möchten. In diesen Aufgaben laden wir Dateien, an denen gulp arbeiten soll (ändern oder nicht), und geben sie dann in einen Rückkehrordner zurück.

Es ist einfach.

In diesem kleinen Tutorial werde ich Ihnen zeigen, wie Sie eine Aufgabe erstellen, um alle CSS-Dateien in Ihrem Ordner zu minimieren. Legen Sie dann die minimierten in einen anderen Ordner.

Lasst uns beginnen

Stellen Sie für dieses Tutorial sicher, dass Sie die neueste Version des npm-Pakets auf Ihrem Computer installiert haben. Wenn Sie es nicht haben, können Sie es hier herunterladen .

Sobald Sie npm installiert haben, installieren wir gulp im Basisverzeichnis Ihres Projekts mit den folgenden Befehlen:

npm install gulp-cli -g

npm install gulp -D

Wir werden auch ein gulp-Plugin verwenden, um CSS namens gulp-clean-css zu minimieren. Installieren Sie es also im Projekttyp:

npm install gulp-clean-css --save-dev

Sehr gut, jetzt, da die Abhängigkeiten im Projekt installiert sind, erstellen wir eine Datei mit dem Namen Gulpfile.js . Diese Datei ist für unsere Aufgaben verantwortlich.

Wir werden auch zwei Ordner in diesem Repository erstellen. Einer heißt Stile, in denen unsere Stildateien verbleiben, und ein anderer heißt dist, in dem die minimierten Dateien gespeichert werden.

Am Ende wird unser Projekt diese Struktur haben:

In Gulpfile.js

Am Anfang der Datei rufen wir die Pakete auf, die wir verwenden werden.

Mit den aufgerufenen Paketen erstellen wir die verantwortliche Aufgabe, indem wir unsere Dateien minimieren.

Sie fragen sich vielleicht, ob Sie Ihre Dateien bereits minimieren können? Ja, indem Sie den Befehl gulp im Terminal ausführen, gefolgt vom Aufgabennamen.

Aber diesen Befehl die ganze Zeit auszuführen ist ein bisschen nervig, nicht wahr? Wir können eine Methode zum Beobachten von Änderungen an Dateien im Stilordner erstellen.

Auf diese Weise wartet das Ausführen des Befehls gulp auf Änderungen in den ausgewählten Dateien, um die Aufgabe minify-css zu aktivieren.

Fazit

Dies ist nur eine kleine Möglichkeit, wie gulp uns bei der Entwicklung unserer Anwendungen helfen kann.

Den Code für dieses Projekt finden Sie in diesem Repository auf GitHub.

Vielen Dank für das Lesen, bitte zögern Sie nicht? und anderen helfen, es zu finden.

Bis bald. ?

Verweise

gulp.js

Durch den Vorzug von Code gegenüber Konfiguration, Best Practices für Knoten und einer minimalen API-Oberfläche macht gulp Dinge wie… gulpjs.com gulp-clean-css einfach

Minimieren Sie CSS mit Clean-CSS. www.npmjs.com