Webworking

Autoprefixer mit PostCSS: Quick and dirty

In meinem derzeit bevorzugten Editor Netbeans ist kein Mechanismus vorhanden, um den Autoprefixer auszuführen. Es gab zwar mal ein Plugin hierzu, dieses basierte jedoch auf die Version 7 und funktioniert heute nicht mehr.  Zwar gibt es die Möglichkeit, mit NodeJS Gulp, Grunt und andere Skripte auszuführen oder über die Run Configuration ein eigenes Skipt zu erstellen, aber für eine schnelle Ergänzung der CSS-Dateien mit Vendor-Codes ist das alles mit Kanonen auf Spatzen zu schießen.

Richtig und sinnvoll wäre es natürlich schon, sein Projekt mit Gulp oder Grunt gleich richtig zu paketieren und mit Build-Prozessen zu versehen. Ein sehr guter Artikel mit einem Einstieg dazu findet sich beispielsweise hier: Gulp for WordPress: Initial Setup

Aber hier soll es erstmal nur um den Quick and Dirty Weg gehen.

PostCSS mit Autoprefixer und NanoCSS

Für den Autoprefixer verwende ich das PostCSS-Plugin in NodeJS.

Wenn man NodeJS bereits hat, erfolgt die Installation mit dem Node Package Manager:

npm install postcss autoprefixer cssnano

Da ist mit PostCSS nicht nur den Autoprefixer seinen Job tun lasse, sondern auch das Ergebnis minifizieren möchte, hab ich auch CSSNano dabei.

Wenn die package.json noch nicht vorhanden ist, kann man sie mit dieser Anweisung erstellen und die Dependencies der Plugins ergänzen:

npm install -save-dev  postcss autoprefixer cssnano

Die Konfiguration hierzu befindet sich in den Dateien postcss.config.js und package.json, die sich beide im Projektordner befinden.

In der Datei postcss.config.js stehen lediglich folgende Anweisungen:

module.exports = {
    plugins: [
        require('autoprefixer')(),
        require('cssnano')()
    ]
};

In der package.json hab ich lediglich folgende Einträge ergänzt:

    
"browserslist": [
     "last 3 years"
]

Dese werden von dem Autoprefixer ausgelesen um statt den Default der Browserliste nur jene zu nehmen, die in den letzten drei Jahren auf den Markt kamen. Dies kann man aber auch weglassen.

Nachdem diese Vorarbeit fertig ist, wird dann auf der Kommandozeile lediglich folgendes Kommando ausgeführt:

postcss css/style.css > style.css

Hier nehme ich die css/style.css Datei, die zuvor durch andere Methoden erstellt wurde (z.B. durch ein CSS-Post-Prozessor) und wandele diese mit PostCSS um. Das Ergebnis wird in style.css geschrieben.

Zack und fertig.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen