Share
Im letzten Tutorial haben Sie gelernt, wie Sie PostCSS verwenden, um Ihre Stylesheets besser browserübergreifender zu machen, insbesondere bei Problemen, die sich aus der Unterstützung von älteren Versionen von IE ergeben.
In diesem Lernprogramm erfahren Sie, wie Sie Ihre Stylesheets effizienter und schneller laden können, indem Sie PostCSS verwenden, um verschiedene Minifizierungs- und Optimierungsvorgänge auszuführen.
Sie lernen, wie Sie:
Accentsconagua
@einführen Selbst wenn einige Ihrer Stylesheets aus Bower-Komponenten oder npm-Modulen stammen, stellen Sie sicher, dass Sie nur ein einziges benötigen http Anfrage zum Laden der CSS Ihrer Site.Lass uns anfangen!
Als Erstes müssen Sie Ihr Projekt so einrichten, dass es entweder Gulp oder Grunt verwendet, abhängig von Ihren Vorlieben. Wenn Sie für das eine oder das andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um die gleichen Ziele zu erreichen, so dass Sie mit dem Arbeiten ein bisschen einfacher sein sollten.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Für dieses Tutorial verwenden wir zwei individuelle Plugins plus ein Plugin-Pack. Installieren Sie sie, indem Sie den folgenden Befehl in Ihrem Projektordner ausführen:
npm install postcss-import css-mqpacker cssnano --save-dev
Nun sind die Plugins installiert, laden wir sie in Ihr Projekt.
Wenn Sie Gulp verwenden, fügen Sie diese Variablen unter den bereits in der Datei vorhandenen Variablen hinzu:
var atImport = required ('postcss-import'); var mqpacker = required ('css-mqpacker'); var cssnano = erfordern ('cssnano');Fügen Sie nun jeden dieser neuen Variablennamen in Ihre hinzu Prozessoren Array:
var-Prozessoren = [atImport, mqpacker, cssnano];
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [erfordern ('postcss-import') (), erfordern ('css-mqpacker') (), erfordern ('cssnano') ()]Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Das hat alle Plugins installiert und geladen, also lernen wir, wie man sie zur Minifizierung und Optimierung einsetzt.
Anstatt mehrere Stylesheets einzeln zu laden, ist es, wo immer möglich, effizienter, Ihre Stylesheets zu einem einzigen zu kombinieren.
Die Verwendung von Normalize.css ist zum Beispiel sehr üblich. Wenn Sie es jedoch als eigenständiges Stylesheet vor Ihrem Haupt-Stylesheet laden, sind mehrere erforderlich http Anfragen, wodurch die Ladezeit verlangsamt wird.
Wenn Sie jedoch das Postcss-Import-Plugin von Maxime Thirouin verwenden, können Sie Normalize.css mithilfe von in Ihrem Haupt-Stylesheet kombinieren @einführen In der Regel erhalten Sie dasselbe CSS mit nur einem http anfordern.
Lassen Sie uns dies jetzt tun, indem Sie Normalize.css importieren und dann in das Stylesheet unseres Projekts einfügen. Beginnen Sie mit dem Herunterladen von „normalize.css“ in den Ordner „src“ Ihres Projekts von https://necolas.github.io/normalize.css/.
Fügen Sie oben in Ihrer Datei "src / style.css" die folgende Zeile ein:
@import 'normalize.css';
Da Sie bereits Postcss-Import installiert haben, müssen Sie das nicht tun. Es wird das sehen @einführen Regel und automatisch den Code aus der Datei normalize.css in Ihr Stylesheet einfügen.
Kompilieren Sie Ihre Datei und wenn Sie Ihre "dest / style.css" -Datei betrachten, sollten Sie den gesamten Inhalt von "normalize.css" darin sehen:
/ *! normalize.css v3.0.2 | MIT-Lizenz | git.io/normalize * / html font-family: serifenlos;…
Sie können diesen Prozess verwenden, um so viele separate Stylesheets zu kombinieren, wie Sie benötigen. Einfach platzieren @einführen Zeilen in Ihrer Datei "src / style.css", wo immer der Inline-Code eingefügt werden soll.
Eine sehr hilfreiche Funktion dieses Plugins ist die Fähigkeit, CSS-Dateien, die sich in Ihrem Ordner „bower_components“ oder „node_modules“ befinden, automatisch zu ermitteln.
Anstatt "normalize.css" wie oben beschrieben manuell herunterzuladen, können Sie stattdessen einfach den Befehl ausführen bower install normalize.css --save in Ihrem Projekt. Dadurch würde automatisch die neueste Datei "normalize.css" in den Ordner "bower_components / normalize.css" heruntergeladen.
Hinweis: Wenn Sie Bower nicht auf Ihrem Computer installiert haben, erfahren Sie hier, wie.
Am oberen Rand Ihres Stylesheets können Sie jetzt stattdessen diese Zeile verwenden:
@import 'normalize.css / normalize.css';
Das Postcss-Import-Plugin wird in Ihrem Ordner „bower_components“ nach „normalize.css“ suchen und dann wie in dem vorherigen Beispiel mit dem Inline-Vorgang fortfahren.
Derselbe Vorgang kann für alle Stylesheets in Ihrem Ordner "node_modules" ausgeführt werden. Dies bedeutet, dass Sie entweder Bower oder npm verwenden können, um Downloads, Abhängigkeitsverwaltung und Updates auszuführen. Wenn Sie einen dieser Dienste verwenden, können Sie mit diesem Plugin CSS-Dateien von Drittanbietern auf einfache Weise in Ihre eigenen Stylesheets integrieren.
Das Importieren von importierten CSS-Dateien auf diese Weise ist nicht nur eine sehr effiziente Methode zum Kombinieren von Dateien aus verschiedenen Quellen, z. B. Bower-Komponenten, sondern bietet Ihnen auch die Möglichkeit, Ihr Projekt in mehreren separaten Stylesheets zu organisieren.
Sie können beispielsweise eine Datei erstellen, um Ihr Layout zu steuern, und eine andere, um Ihr Farbschema zu steuern. Wenn Sie Ihr Farbschema ändern möchten, können Sie einem Vorgang wie folgt folgen:
Sie können diesen Vorgang dann beliebig oft wiederholen, sodass Sie mehrere Farbschemata für dasselbe Design erstellen können.
Einige Projekte verwenden separate Stylesheets, um mehrere Farbschemata wie diese bereitzustellen, sie erzeugen jedoch eine Verlangsamung durch Hinzufügen http Anfragen. Mit diesem Ansatz erhalten Sie immer nur einen http Bitte, obwohl Sie viel Freiheit haben, was in Ihrem einzelnen Stylesheet enthalten sein könnte.
Weitere Informationen zum Postcss-Import finden Sie unter: https://github.com/postcss/postcss-import
Das css-mqpacker-Plugin von Kyo Nagashima findet passende Media-Abfragen in Ihrem Stylesheet und kombiniert sie zu einer. Auf diese Weise können Sie Ihr CSS in Ihren Entwicklungs-Stylesheets nach Ihren Wünschen organisieren und Medienabfragen bei Bedarf wiederholen, ohne die Effizienz Ihres Produktions-Stylesheets zu beeinträchtigen.
Lassen Sie uns ein Beispiel für die Art des Anwendungsfalls zusammenstellen, bei dem Sie möglicherweise Medienabfragen wiederholen möchten, z. B. wenn Sie das Layout und die Grafiken Ihres Designs separat organisieren. In einem realen Projekt kann dies bedeuten, dass völlig separate Dateien verwendet werden, eine für Layout und eine für visuelle Elemente. Der Einfachheit halber werden wir dies alles in unserer Datei "src / style.css" tun.
Wir beginnen mit einem Layoutcode. Wir werden ein hinzufügen .Säule Klasse, die zwei machen wird 50% Spalten in der Breite sitzen standardmäßig nebeneinander. Dann verwenden wir eine Medienabfrage, um sie in kleineren Größen übereinander stapeln zu lassen. Fügen Sie diesen Code Ihrem Stylesheet hinzu:
/ * LAYOUT * / .spalte Breite: 50%; Schwimmer: links; @media (max-width: 50rem) .column width: 100%; Float: keine;
Als Nächstes fügen wir einige visuelle Elemente hinzu, um einen grauen Rahmen um unsere Spalten zu setzen. Die erste Spalte enthält die Klasse .column_one und der zweite wird die Klasse haben .column_two. Wir werden dieselbe Medienabfrage wie bei unserem Layout verwenden, um zu ändern, wie wir einen Rand auf unsere Spalten anwenden, je nachdem, ob sie nebeneinander oder übereinander sitzen.
Fügen Sie diesen Code auch Ihrem Stylesheet hinzu:
/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (max-width: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Kompilieren Sie nun Ihre Datei "src / style.css" neu und sehen Sie sich den resultierenden Inhalt von "dest / style.css" an.
Wie Sie im folgenden Code sehen können, hat das css-mqpacker-Plugin die beiden übereinstimmenden Medienabfragen identifiziert und in einer zusammengefasst:
/ * LAYOUT * / .spalte Breite: 50%; Schwimmer: links; / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (max-width: 50rem) .column width: 100%; Float: keine; .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Hinweis: Der obige Code wird in der Datei "dest / style.css" aufgrund des cssnano-Plugins minimiert. Um den Code unbemerkt zu sehen, kommentieren Sie ihn vorübergehend aus Cssnano von Ihrer Gulpfile oder Gruntfile Prozessoren Array.
Weitere Informationen zu css-mqpacker finden Sie unter https://github.com/hail2u/node-css-mqpacker
Für eine umfassende und vielseitige CSS-Optimierung ist das cssnano-Pack von Ben Briggs eine sehr leistungsfähige Option, die jedoch Plug-and-Play-Funktionen bietet. Es bringt ungefähr fünfundzwanzig Plugins zusammen und kann eine beeindruckende Anzahl von verschiedenen Arten der Optimierung durchführen.
Unter einer langen Liste von Optimierungen kann es:
calc () benutzenWir werden in Ihrem Projekt Beispielcode bearbeiten, in dem alle oben genannten Optimierungen angewendet werden.
Fügen Sie diesen Code zu Ihrer Datei "src / style.css" hinzu:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Dies ist ein Beispiel für die Verwendung von cssnano * / font-weight: normal; Rand oben: 1rem; Rand unten: 2rem; Rand links: 1.5rem; Rand rechts: 2.5rem; Schriftgewicht: normal; Polsterung: 1,75rem; Breite: berechnet (50rem - (2 * 1,75rem)); eine Textdekoration: keine; Schriftdicke: fett; p font-weight: fett;
Dann kompilieren Sie Ihre Datei neu.
Hinweis: Sie möchten eventuell bereits vorhandenen Code auskommentieren, damit Sie die Ergebnisse deutlich sehen können.
In Ihrer Datei "dest / style.css" sollte jetzt der optimierte Code angezeigt werden:
.css_nano, .css_nano + p, [class * = css_nano] Marge: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Polsterung: 1.75rem; Breite: 46.5rem Schriftgewicht: 700
Sehen Sie sich die Liste der Optimierungen an, die in der Aufzählungsliste oben aufgeführt ist, und vergleichen Sie dann den Beispielcode vor und nach der Kompilierung, um zu sehen, wie jede dieser Änderungen stattfindet:
Schriftgewicht: normal und Schriftdicke: fett werden in konvertiert Schriftgewicht: 400 und Schriftgewicht: 700 Schriftgewicht: normal; wurde aus dem entfernt .css_nano Stilcalc () Eigenschaft wurde auf einen statischen Wert reduziert.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano wurden minimiert .css_nano, .css_nano + p, [class * = css_nano] Rand oben: 1rem; Rand unten: 2rem; Rand links: 1.5rem; Rand rechts: 2.5rem; wurden auf reduziert Marge: 1rem 2.5rem 2rem 1.5rem; ein und p Stile wurden zusammengeführt, um ihre Gemeinsamkeiten zu teilen Schriftgewicht: 700; RahmenEine vollständige Liste der Optimierungen bietet cssnano unter http://cssnano.co/optimisations/.
Es gibt mehrere unabhängige Plugins, die vom cssnano-Paket verwendet werden. Möglicherweise möchten Sie Einstellungen für einige davon konfigurieren oder vollständig deaktivieren.
Um ein Plugin zu deaktivieren, übergeben Sie seinen Namen in Ihren Optionen für cssnano mit der Einstellung "false". Wenn Sie beispielsweise die Schriftgewichtungen nicht optimieren möchten, legen Sie Folgendes in Ihrer Gulpfile / Gruntfile fest:
// In Gulpfile 'Prozessor-Array' cssnano (minifyFontWeight: false) // // In Gruntfile 'Prozessor-Array' benötigt ('cssnano') (minifyFontWeight: false)Sie können auf dieselbe Weise Optionen für ein Plugin konfigurieren, indem Sie zunächst den Namen des Plugins angeben und dann seine Optionen festlegen.
Sie können beispielsweise die Genauigkeit (Anzahl der Dezimalstellen) festlegen, die das calc-Plugin verwenden soll. Standardmäßig berechnet (100% / 2,76) würde dir geben 36.23188%. Wenn Sie diese Genauigkeit jedoch auf zwei Dezimalstellen reduzieren möchten, können Sie dies folgendermaßen tun:
// In Gulpfile 'Prozessoren' Array cssnano (calc: Präzision: 2) // // In Gruntfile 'Prozessoren' Array benötigen ('cssnano') (calc: Präzision: 2)Der Berechnungswert würde jetzt in ausgegeben 36,23%.
Weitere Informationen zu den Optionen von cssnano finden Sie unter: http://cssnano.co/options
Lassen Sie uns einen Überblick darüber erhalten, was wir oben behandelt haben:
Im nächsten Tutorial werden wir uns mit PostCSS für die Vorverarbeitung über ein hervorragendes Plugin-Paket namens PreCSS beschäftigen. Dieses Paket bietet sofortigen Zugriff auf Sass-ähnliche Syntax und Funktionalität, mit Variablen, Mixins, Bedingungen, Erweiterungen und mehr.
Wir sehen uns im nächsten Tutorial!
