Share
In diesem Tutorial zeige ich Ihnen, wie Sie mit Grunt und PurifyCSS ein extrem leichtes Stylesheet mit minimalem Aufwand erstellen können. Wir werden es installieren und dann lernen, wie man es mit und ohne Grunt laufen lässt, um uns wesentlich performanter zu machen.
PurifyCSS ist ein JavaScript-Tool, das Ihre Markup-Dateien (HTML, PHP oder sogar JavaScript) analysiert und diese dann mit dem von Ihnen verwendeten CSS-Objekt querverweise. Alle Selektoren in Ihrem CSS, die nicht verwendet werden, werden entfernt, sodass nur die Stile übrig bleiben, die Sie tatsächlich benötigen.
Um PurifyCSS zu installieren, können Sie das Repo entweder direkt von GitHub herunterladen oder es über npm installieren (weitere Informationen dazu finden Sie in diesem Tutorial von Kezz)..
Installation über npmDie Dateien, die wir zur Demonstration von PurifyCSS verwenden, sind ein vollständiges Bootstrap-Stylesheet und eine index.html. Sie können sie aus dem Quell-Repo entnehmen. Die Datei index.html ist ziemlich unkompliziert. Es gibt nur einen Heldenbereich mit einigen Schaltflächen, Formularelementen und dem Bootstrap-Raster. Wir benötigen sicherlich nicht die gesamte Bibliothek von Bootstrap-Styles.
Das vollständige Bootstrap-StylesheetUm PurifyCSS in diesem Stylesheet auszuführen, wechseln Sie zur Eingabeaufforderung, navigieren Sie zum Projektordner und führen Sie einen Befehl mit folgendem Befehl aus:
Accentsconagua
purifycss Befehl zum Anstoß--Mindest wenn wir wollen, dass das resultierende CSS minimiert wird--aus Danach können wir angeben, wo die resultierende Datei gespeichert werden soll--Info Wenn wir möchten, dass der Prozess am Terminal angemeldet wird--abgelehnt Wenn diese Option enthalten ist, werden alle Selektoren protokolliert, die aus dem Quell-Stylesheet abgelehnt wurdenUnser letzter Befehl sieht so aus:
purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info --rejected
Das Quell-Stylesheet wurde um weit über 100 KByte gekürzt, gute Arbeit!
Um unseren Prozess noch weiter zu automatisieren, können wir einen Task Runner wie Grunt verwenden. Um zu unserem Ausgangspunkt zurückzukehren, müssen wir unserem Projekt eine package.json hinzufügen. Das Ausführen von npm init aus unserem Ordner führt uns durch einen Erstellungsprozess von package.json, wobei im Wesentlichen eine Datei mit den folgenden Details ausgegeben wird:
"name": "purifycss", "version": "1.0.0", "description": "Eine Datei zum Testen von Grunt PurifyCSS", "main": "index.js", "scripts": "test" : "Echo" Fehler: Kein Test angegeben \ "&& Beenden 1", "Autor": "Adi Purdila", "Lizenz": "ISC",
Wenn wir es noch nicht haben, müssen wir Grunt installieren:
npm install grunt --save
Damit ist der Ordner "node_modules" zu Ihrem Projekt hinzugefügt worden.
Als Nächstes müssen wir das Grunt-Plugin für PurifyCSS installieren.
npm install grunt-purifycss --save
Jetzt müssen wir eine Datei mit dem Namen gruntfile.js erstellen. Schauen Sie sich die Quelldateien an, um zu sehen, was in dieser Datei enthalten ist. Besonders interessant ist jedoch der Grunt-Task selbst:
purifycss: target: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], dest: 'css / bootstrap-grunt.css'
Die Optionen innerhalb des Zielobjekts sollten Ihnen aus unserer vorherigen Übung bekannt sein, und wenn diese Parameter eingestellt sind, ist unsere Datei fertig.
Um Grunt auszuführen, geben Sie im Terminal Folgendes ein:
grunzen purifycss
Und wir sind fertig! Wir haben zwei verschiedene Ansätze für die Verwendung von PurifyCSS zur Reinigung unserer Stylesheets betrachtet. Vergessen Sie nicht: Es hat keinen Sinn, wenn Browser in Kilobytes von Stilen laden, die nicht einmal verwendet werden, Leistung zählt!
