Wat ass PostCSS?

Fir z'erklären wat PostCSS ass, musse mir als éischt verstoen wat PostCSS net ass.
Tatsächlech, wann d'Leit fir d'éischt iwwer PostCSS héieren, tendéieren se ze denken datt et eng nei Aart vu Pre-Processor ass wéi SASS, LESS oder Stylus.
Et kann wéi e Pre-Processor handelen wann Dir et wëllt oder souguer wéi e Post-Processor, en Optimisatiounsinstrument, e Plugin fir zukünfteg Syntax ze schreiwen, Dir nennt et ...
Amplaz ass den Haaptzweck vu PostCSS et ze erlaben Iech Tools ze benotzen déi Är Bedierfnesser erfëllen.
Also musst Dir PostCSS als Build-Tool gesinn, deen Iech erlaabt Är CSS ze manipuléieren mat der Benotzung vu verschiddene JavaScript Plugins déi Dir fannt http://postcss.parts
Well et vill Plugins gëtt, wäerte mir duerch dësen Artikel déi iwwerpréiwen déi déi mächtegst an allgemeng benotzt sinn.
Mir wäerten och kucken wéi Dir se mat Gulp benotzt a wéi Dir eng eenzeg Aufgab erstellt fir Är CSS Dateien ze veraarbecht.

Autoprefix

Wann Dir virdru e Pre-Processor benotzt hutt, wësst Dir scho wéi agreabel et ass net all Verkeefer Präfixe ëmmer erëm ze schreiwen.
Zum Beispill, amplaz ze schreiwen

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

Dir kënnt einfach schreiwen

:fullscreen a {
 display: flex
}

Wann Dir et selwer wëllt probéieren, kënnt Dir déi interaktiv Demo benotzen: http://autoprefixer.github.io
D'Dokumentatioun ass hei verfügbar: https://github.com/postcss/autoprefixer

PreCSS

Och wann PostCSS net e Pre-Processor wéi SASS ass, kënnt Dir nach ëmmer e puer PostCSS Plugins benotzen fir Sass-ähnlech Markup an Ären CSS Dateien ze benotzen.
Dee meescht benotzte Plugin ass sécher PreCSS deen aggregéiert eng Rëtsch PostCSS Plugins fir Iech dës Aart vu Syntax ze schreiwen.
Ech invitéieren Iech de Dokumentatioun fir méi doriwwer ze léieren a mat der ze spillen interaktiv Demo all Méiglechkeeten ze testen.

CssNext

CSS4, déi nächst Versioun vu CSS, versprécht d'Art a Weis wéi mir CSS schreiwen an d'Selekter benotzen.
Leider ass dës Versioun vun der Spezifizéierung nach ëmmer an der aktiver Entwécklung a kee Verëffentlechungsdatum ass nach ugekënnegt.
Glécklech fir eis ass e Plugin genannt CssNext hei fir Iech ze hëllefen wann Dir e puer Features vun der nächster Versioun vun CSS benotze wëllt.
All dës Funktiounen sinn op der offizieller Websäit vun CssNext opgezielt: http://cssnext.io/features/
An Dir kënnt och hei mat spillen: http://cssnext.io/playground/

CssNano

Lescht awer net zulescht, CssNano wäert Är CSS kompriméieren an optimiséieren mat der Benotzung vu verschiddene Moduler dat këmmert sech ëm d'Optimiséierung.
Ech recommandéieren Iech auszeschalten z-index eng, well et wäert héchstwahrscheinlech mat der Art a Weis wéi Ären z-Index organiséiert sinn.
Dir kënnt d'Lëscht vun den Optimisatiounen hei iwwerpréiwen: http://cssnano.co/optimisations/
An Dir kënnt souguer mam Ersteller vu CssNano op Gitter chatten: https://gitter.im/ben-eb/cssnano
Elo, loosst eis kucken wéi dës Plugins mat Gulp ëmsetzen.

Gulp x PostCSS

Schlécken

Als éischt musst Dir Gulp, Gulp Load Plugins a Gulp PostCSS als Dev Ofhängegkeeten installéieren andeems Dir de folgende Kommando an Ärem Terminal tippt

npm i -D gulp gulp-load-plugins gulp-postcss

Dir kënnt dann e Fichier genannt gulpfile.js schafen wou mir Gulp lued mat
 

var gulp = require('gulp'),

A Gulp Lueden Plugins mat

$ = require('gulp-load-plugins')();

Gulp Load Plugins hëllefen eis dann all Gulp Plugin ze lueden andeems Dir $ virum Plugin schreift dee mir an eiser Aufgab benotze wëllen.

PostCSS

Da musse mir d'PostCSS Plugins installéieren déi mir benotze wëllen, si ginn och als Dev Ofhängegkeet installéiert andeems Dir dëse Kommando benotzt

npm i -D cssnano cssnext viraus

Wann all déi Plugins installéiert sinn, luede mir se an eisem gulpfile.js

// PostCSS Plugins
var cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

Da kënne mir ufänken eis Gulp CSS Aufgab ze schreiwen

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
 });

An dëser Aufgab musse mir als éischt an enger Variabel all d'PostCSS Plugins späicheren déi mir benotze wëllen

var processors = [cssnext, precss, cssnano({zindex: false})];

Mir passéieren den Optiounsobjekt zindex: falsch op CssNano fir d'Rebase vun eisen z-Indexen auszeschalten.
Fir eis CSS-Datei ze verarbeiten, musse mir se mat recuperéieren

return gulp.src('./source/css/style.css')

Da kënne mir et mat eise PostCSS Plugins veraarbechten, déi an der Variabel vum Prozessor gespäichert sinn.
Mir benotzen d'Päifmethod fir d'Prozesser ze ketten

.pipe($.postcss(processors))

Fir d'veraarbechtte Datei auszeginn, schreift de folgende Code

.pipe(gulp.dest('./public/assets/stylesheets'));

An dat ass alles wat Dir braucht fir Är CSS Dateien mat de PostCSS Plugins ze veraarbechten.

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
// PostCSS Plugins
var cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');
// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [cssnext, precss, cssnano({zindex: false})];
return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

Fir weider Liesen, ech recommandéieren Iech de ganz kompletten an detailléierte Guide vun Tuts + ze liesen: http://webdesign.tutsplus.com/series/postcss-deep-dive–cms-889
Ech hunn och e Boilerplate erstallt mat dëse PostCSS Plugins fir Iech ze hëllefen Ären zukünftege statesche Websäitprojet ze kickstart: https://github.com/PierrickGT/PCGB