PostCSS-Schnellstartanleitung Grunt-Setup

Im letzten Tutorial haben wir durchlaufen, wie man mit Gulp ein PostCSS-Projekt aufbaut. In diesem Tutorial erreichen wir dieselben Ziele, indem wir Grunt verwenden. Am Ende dieses Tutorials erfahren Sie, wie Sie ein PostCSS + Grunt-Projekt mit einer beliebigen Auswahl von Plugins einrichten.

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.

Voraussetzungen

Da wir mit Grunt arbeiten, gehen wir davon aus, dass Sie die Voraussetzungen für die Verwendung bereits installiert haben:

• Node.js
• NPM
• Git

Wenn Sie nicht sicher sind, ob Sie diese installiert haben, folgen Sie dem Lernprogramm Die Befehlszeile für Webdesign: Taming von Drittanbieter-Paketen.

Stellen Sie sicher, dass Sie Grunt CLI global installiert haben, und verstehen Sie die grundlegende Verwendung der Befehlszeile für Webdesign: Automatisierung mit Grunt. Befolgen Sie außerdem die Anweisungen im Abschnitt „Projekt für Grunt einrichten“ des Lernprogramms. Bevor Sie fortfahren, sollten Sie einen Projektordner haben mit:

• Eine "gruntfile.js" (Gruntfile)
• Eine "package.json" -Datei
• Grunt im Ordner "node_modules" installiert und als Dev-Abhängigkeit für Ihr Projekt festgelegt.

PostCSS via Grunt

Fügen Sie in Ihrem Projektordner zwei Unterordner hinzu, einen mit dem Namen "src" und den anderen mit dem Namen "dest". Der Ordner "src" enthält Ihre unverarbeiteten CSS-Dateien. PostCSS schreibt Ihre kompilierten CSS-Dateien in den Ordner "dest".

Als nächstes müssen Sie das Grunt-Plugin für PostCSS in Ihrem Projekt installieren: Wir verwenden Grunt-Postcss für die Kompilierung.

Führen Sie in einer Terminal- / Eingabeaufforderung, die auf Ihren Projektordner verweist, den folgenden Befehl aus:

npm install grunt-postcss --save-dev

An diesem Punkt sollte Ihre Projektstruktur folgendermaßen aussehen:

Öffnen Sie Ihre Gruntfile zur Bearbeitung und fügen Sie zunächst die grundlegende Code-Shell hinzu, die alle Gruntfiles benötigen:

module.exports = Funktion (Grunzen) ;

Darin verwenden wir die grunt.loadNpmTasks () Funktion in unsere laden grunzen-postcss Plugin wie folgt:

module.exports = function (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;

Jetzt können wir mit der Konfiguration der Grunt-Task beginnen, die zum Ausführen von postcss verwendet wird. Fügen Sie zuerst das hinzu grunt.initConfig () Funktion über der gerade hinzugefügten Zeile:

module.exports = function (grunt) grunt.initConfig (); grunt.loadNpmTasks ('grunt-postcss'); ;

Richten Sie darin ein Objekt mit dem Namen postcss wie so:

module.exports = function (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ('grunt-postcss'); ;

Im Inneren des Neuen postcss object fügen wir zwei weitere verschachtelte Objekte hinzu, eines mit Namen Optionen und einer namens dist:

module.exports = function (grunt) grunt.initConfig (postcss: Optionen: , dist: ); grunt.loadNpmTasks ('grunt-postcss'); ;

Das Optionen Das Objekt enthält die Konfiguration für PostCSS und die dist Das Objekt enthält Informationen darüber, wo unsere CSS-Dateien gelesen werden sollen von und geschrieben zu.

Machen Sie jetzt weiter und erstellen Sie eine CSS-Datei mit dem Namen "style.css" im Ordner "src" Ihres Projekts. Fügen Sie etwas Testcode hinzu, zum Beispiel:

.Test Hintergrund: Schwarz; 

Aktualisieren Sie jetzt die dist Objekt, um "src / style.css" als Quelldatei und "dest / style.css" als die Datei anzugeben, die wir generieren möchten:

 dist: src: 'src / style.css', dest: 'dest / style.css'

Dann in der Optionen Objekt, fügen Sie ein leeres Array mit dem Namen Prozessoren. Hier werden PostCSS-Plugins für die spätere Verwendung konfiguriert. Für den Moment aktualisieren Sie es einfach auf:

 Optionen: Prozessoren: [],

Führen Sie einen Test-Compile aus

Ihre grundlegende postcss Aufgabe ist jetzt bereit zu gehen. Um es auszuprobieren, führen Sie den Befehl mit der Eingabeaufforderung des Terminals / der Eingabeaufforderung immer noch auf Ihren Projektordner aus:

grunzen postcss

In Ihrem Terminal sollten Sie folgende Meldung sehen:

Task "postcss: dist" (postcss) ausführen >> 1 verarbeitetes Stylesheet erstellt.

In Ihrem "dest" -Ordner sollten Sie nun eine neue "style.css" -Datei finden, die denselben Code wie die "style.css" -Datei in Ihrem "src" -Ordner enthält.

PostCSS-Plugins hinzufügen

Als Nächstes fügen wir eine Auswahl von PostCSS-Plugins und Packs hinzu: Autoprefixer (fügt Herstellerpräfix hinzu), cssnext (ermöglicht zukünftige Syntax) und precss (erweitert sich mit Sass-ähnlicher Funktionalität).

Führen Sie die folgenden Befehle aus, um die einzelnen Befehle 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.

Nun können wir jedes Plugin über die Prozessoren Array, das wir zuvor erstellt haben. Aktualisieren Sie das Array folgendermaßen:

 Prozessoren: [Require ('Autoprefixer') (), Required ('cssnext') (), Required ('precss') ()]

Fügen Sie nun etwas Testcode zu unserer Quelldatei „style.css“ hinzu und prüfen Sie, ob die neu installierten PostCSS-Plugins wie erwartet funktionieren. 

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 grunzen postcss 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

Sie sehen in der .Autoprefixer Klasse, Herstellerpräfixe wurden von Autoprefixer hinzugefügt. In dem .cssnext Klasse, eine rgba () Farbe wurde von cssnext generiert. Und zum Schluss im .precss Klasse, die @ansonsten Die Bedingung wurde von PreCSS bewertet.

Plugin-Optionen einstellen

Wenn Sie Optionen für ein Plugin konfigurieren möchten, übergeben Sie Ihre Optionen durch das zweite Paar Klammern nach dem benötigen() Funktion für dieses Plugin. Sie können beispielsweise die Browserliste angeben, die für Autoprefixer verwendet werden soll, wie folgt:

 Prozessoren: [Require ('Autoprefixer') (Browser: ['Letzte 1 Version']), Required ('cssnext') (), Required ('precss') ()]

Teilen Sie Ihr Projekt

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.

Lassen Sie uns rekapitulieren

Zusammenfassend alles, was oben beschrieben wurde:

• Erstellen Sie ein npm-Projekt mit installiertem Grunt und einer Gruntfile darin
• Installieren Sie das Grunt-Postcss-Plugin
• Richten Sie Ihre Gruntfile-Shell ein und laden Sie Grunt-Postcss mit grunt.loadNpmTasks ('grunt-postcss');
• Erstellen Sie eine Grunt-Aufgabe, um Ihr CSS zu kompilieren
• Richten Sie innerhalb der Aufgabe eine ein Optionen Objekt mit einem Prozessoren Array
• Richten Sie auch innerhalb der Aufgabe ein dist Objekt, das Ihre Quelldateien und das Ziel für kompilierte Dateien angibt

Von dort aus können Sie dieselben wesentlichen Schritte ausführen, um ein beliebiges PostCSS-Plugin in Ihrem Projekt zu aktivieren:

• Installieren Sie das Plugin mit in Ihr Projekt 
  npm installieren --save-dev
• Fügen Sie diesen Variablennamen in Ihr ein Vorprozessoren Array mit der Funktion request ()
  benötigen('') ().

Schauen Sie sich das Github-Repo für Starter-Dateien und fertige Beispiele an.

Up Next: Plugins erkunden

Jetzt wissen Sie, wie Sie Gulp oder Grunt verwenden, um PostCSS mit beliebigen Plugins zu verwenden. Das nächste, was Sie brauchen, ist eine Möglichkeit, das PostCSS-Plugin-Ökosystem zu erkunden und großartige Plugins zu finden, die perfekt für die Art von Projekten geeignet sind, die Sie erstellen möchten.

Wir gehen genau durch, wie Sie das im nächsten Tutorial machen können. "Schnellstartanleitung: Plugins erkunden".