Share
Im letzten Tutorial haben wir beschrieben, wie Sie PostCSS mit CodePen oder Prepros sofort einsetzen können. Diese Optionen sind großartig, beschränken sich jedoch darauf, dass Sie nicht steuern können, welche Plugins verfügbar sind.
In diesem Lernprogramm erfahren Sie, wie Sie PostCSS mit dem Taskrunner Gulp verwenden können. So können Sie selbst entscheiden, welche Plugins Sie verwenden möchten, und so das Plugin-Ökosystem wirklich nutzen.
Hinweis: Wenn Sie noch nie mit Befehlszeilen- oder Task-Läufern gearbeitet haben, empfehle ich Ihnen, bevor Sie dieses Lernprogramm beginnen, unsere kostenlose Serie: Die Befehlszeile für Webdesign.
Da wir mit Gulp arbeiten, gehen wir davon aus, dass Sie bereits die Voraussetzungen für die Verwendung von Gulp installiert haben:
Wenn Sie nicht sicher sind, ob Sie diese installiert haben, folgen Sie dem Tutorial Die Befehlszeile für Webdesign: Pakete von Drittanbietern, um die Voraussetzungen dafür zu erlernen.
Stellen Sie außerdem sicher, dass Sie die Grundlagen der Verwendung von Gulp verstehen. Befolgen Sie dazu das Tutorial Die Befehlszeile für Webdesign: Automatisierung mit Gulp. Befolgen Sie außerdem die Anweisungen im Abschnitt „Projekt für Gulp einrichten“. Bevor Sie fortfahren, sollten Sie einen Projektordner haben mit:
Erstellen Sie in Ihrem Projektordner zwei Unterordner, einen mit Namen "src" und einen mit "dest". Im Ordner "src" werden Ihre unverarbeiteten CSS-Dateien gespeichert, während im Ordner "dest" Ihre PostCSS-Dateien gespeichert werden.
Als nächstes müssen Sie das gulp-postcss-Plugin in Ihrem Projekt installieren. Wir werden dies zur Bearbeitung unserer PostCSS-Verarbeitung verwenden.
Führen Sie in einer Terminal- / Eingabeaufforderung, die auf Ihren Projektordner verweist, den folgenden Befehl aus:
npm install --save-dev gulp-postcss
Nach Abschluss der Installation sollte Ihre Projektstruktur folgendermaßen aussehen:
Öffnen Sie nun Ihre Gulpfile für die Bearbeitung und erstellen Sie Variablen, um die Module "gulp" und "gulp-postcss" aufzurufen, indem Sie folgenden Code hinzufügen:
Accentsconagua
var gulp = required ('gulp'); var postcss = required ('gulp-postcss');Wir können jetzt eine Aufgabe einrichten, um eine Quell-CSS-Datei zu lesen und über PostCSS zu verarbeiten.
Fügen Sie folgendes hinzu:
gulp.task ('css', function () var-Prozessoren = []; gulp.src ('./ src / *. css') .pipe (postcss (Prozessoren)) .pipe (gulp.dest ('. / dest ')););Lassen Sie uns zusammenfassen, was wir im Code oben haben.
In der ersten Zeile haben wir eine Schluckaufgabe mit dem Namen eingerichtet css. Diese Task führt eine Funktion aus, und innerhalb dieser Funktion haben wir ein Array mit dem Namen erstellt Prozessoren. Im Moment ist das Array leer, aber in Kürze füllen wir das mit den PostCSS-Plugins, die wir verwenden möchten.
Nach dem Prozessoren Array haben wir die Dateien angegeben, die wir zur Verarbeitung anvisieren möchten: alle CSS-Dateien im Ordner „src“.
In der ersten der beiden Zeilen mit der Rohr() Funktion setzen wir PostCSS zur Ausführung über die Funktion postcss (). Als Argument durch diese Funktion geben wir unsere weiter Prozessoren array, das später PostCSS mitteilt, welche Plugins wir verwenden möchten.
Schließlich mit dem zweiten der beiden Rohr() Funktionen, haben wir unseren verarbeiteten Code in eine neue CSS-Datei in unserem "dest" -Ordner geschrieben.
Erstellen Sie eine neue "style.css" -Datei in Ihrem "src" -Ordner und fügen Sie einige Test-CSS hinzu:
.Test Hintergrund: Schwarz;
Führen Sie nun in Ihrer Terminal- / Eingabeaufforderung immer noch Ihren Projektordner aus und führen Sie den Befehl aus:
Schluck Css
Dadurch wird die Aufgabe ausgeführt, die Sie gerade eingerichtet haben, und als Ergebnis sollten Sie nun eine neue Datei "style.css" in Ihrem "dest" -Ordner finden.
Wenn Sie diese neue Datei öffnen, sehen Sie darin identischen Code wie Ihre Quelldatei. Der Code hat sich nicht geändert, weil wir noch keine PostCSS-Plugins verwendet haben. Wie Sie aus einem vorherigen Tutorial wissen, sind es die Plugins, die die eigentlichen CSS-Manipulationen durchführen.
Wir fügen nun eine Auswahl von PostCSS-Plugins und Packs hinzu: Autoprefixer (fügt Herstellerpräfixe hinzu), cssnext (ermöglicht zukünftige Syntax) und precss (erweitert mit Sass-ähnlicher Funktionalität)..
Führen Sie die folgenden Befehle aus, um jedes Plugin in Ihrem Projekt zu installieren:
npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev
Hinweis: Das cssnext und precss Installationen können etwas dauern, da es sich um Pakete mit mehreren Plugins handelt.
Als Nächstes definieren wir Variablen, die in jedes Projekt geladen werden sollen. Fügen Sie den folgenden Code unter den beiden vorhandenen Variablen oben in Ihrer Gulpfile hinzu:
var autoprefixer = required ('autoprefixer'); var cssnext = required ('cssnext'); var precss = requir ('precss');Dann fügen wir diese drei Plugins dem hinzu Prozessoren Array in unserer Schluckaufgabe. Aktualisieren Sie das Array wie folgt:
var-Prozessoren = [Autoprefixer, cssnext, precss];
Mit den drei Plugins, die zu unserem Prozessor-Array hinzugefügt wurden, weiß PostCSS, dass wir jedes auf unser Quell-CSS anwenden möchten.
Wir können jetzt etwas Testcode zu unserer Datei "src / style.css" hinzufügen und prüfen, ob alles funktioniert. Löschen Sie das, was Sie bereits in der Datei haben, und fügen Sie stattdessen dieses CSS hinzu:
/ * Autoprefixer testen * / .autoprefixer display: flex; / * Testing cssnext * / .cssnext background: color (rotes Alpha (-10%)); / * Testvoraussetzungen * / .precss @if 3 < 5 background: green; @else background: blue;
Führen Sie das aus Schluck Css Befehl jetzt erneut und die resultierende Datei in Ihrem Zielordner sollte folgenden Inhalt haben:
/ * Autoprefixer testen * / .autoprefixer display: -webkit-box; Anzeige: -webkit-flex; Anzeige: -ms-flexbox; Anzeige: Flex; / * Testing cssnext * / .cssnext background: rgba (255, 0, 0, 0,9); / * Testvoraussetzungen * / .precss Hintergrund: Grün
Wie oben beschrieben, sollten Sie sehen, dass Herstellerpräfixe von Autoprefixer zur ersten Klasse hinzugefügt wurden rgba () Die Farbe wurde von cssnext in der zweiten Klasse ausgegeben und die @ansonsten check wurde von PreCSS in der dritten Klasse bewertet.
Hinweis: Wenn Sie Optionen für ein Plugin konfigurieren möchten, fügen Sie nach dem Namen ein Paar Klammern im Präprozessorarray hinzu und übergeben Sie die Optionen dort. Sie können beispielsweise die Browserliste angeben, die für Autoprefixer verwendet werden soll, wie folgt:
var-Prozessoren = [Autoprefixer (browser: [letzte Version]]), cssnext, precss];
Das Schöne an PostCSS ist, dass es mit jeder Kombination von Plugins konfiguriert werden kann. Die Herausforderung, die sich daraus ergibt, besteht jedoch darin, sicherzustellen, dass andere Personen, die an einem Projekt arbeiten möchten, die gleichen PostCSS-Plugins verwenden. Dank npm wird diese Herausforderung durch das System des Abhängigkeitsmanagements gemeistert.
Weil Sie das verwenden --save-dev Jedes Mal, wenn Sie ein Plugin in Ihrem Projekt installieren, wird es als dev-Abhängigkeit zu Ihrer Datei "project.json" hinzugefügt. Das heißt, wenn Sie Ihr Projekt mit anderen teilen möchten, können diese den Befehl ausführen npm installieren Auf dem Paket, das Sie mit ihnen teilen, werden automatisch dieselben Plugins installiert.
Weitere Informationen zur Funktionsweise von Abhängigkeitsmanagement mit NPM finden Sie im Tutorial Die Befehlszeile für Webdesign: Taming von Drittanbieter-Paketen.
Um das oben zusammenzufassen:
Prozessoren Arraypostcss () Funktion mit der Prozessoren Array als Argument übergebenVon dort aus können Sie dieselben wesentlichen Schritte ausführen, um ein beliebiges PostCSS-Plugin in Ihrem Projekt zu aktivieren:
npm installieren --save-dev var autoprefixer = required ('autoprefixer'); Vorprozessoren Array.Schauen Sie sich das Github-Repo für Starter-Dateien und fertige Beispiele an.
Im nächsten Tutorial erfahren Sie, wie Sie ein PostCSS-Projekt in den anderen beiden großen Task-Läufern einrichten: Grunt. Wir sehen uns dort!
