Share
I den senaste handledningen behandlade vi hur du kan börja med PostCSS direkt med CodePen eller Prepros. Dessa alternativ är bra, men restriktiva eftersom du inte kan kontrollera vilka plugins som finns tillgängliga för dig att använda.
I den här handledningen kommer vi att gå igenom hur du kan använda PostCSS med task runner Gulp, så att du själv bestämmer vilka plugins du vill använda och därmed verkligen knackar in i plugin-ekosystemet.
Notera: Om du aldrig har arbetat med kommandoraden eller uppgiftslöpare tidigare rekommenderar jag att innan du börjar denna handledning, kolla in vår fria serie: Kommandoraden för webbdesign.
Med tanke på att vi kommer att arbeta med Gulp, antar vi att du redan har förutsättningarna för användningen installerad:
Om du inte är säker på att du har installerat dem, följ instruktionen Kommandoraden för webbdesign: Taming 3: e paket, eftersom det kommer att ta dig igenom dessa förutsättningar på plats.
Vänligen se till att du förstår grunderna i Gulp-användningen genom att följa handledning Kommandoraden för webbdesign: Automation with Gulp. Dessutom följer instruktionerna i handledningens avsnitt "Installationsprojekt för gulp". Innan du går vidare bör du ha en projektmapp med:
Inuti din projektmapp skapa två undermappar, en som heter "src" och en som heter "dest". "Src" -mappen kommer att hålla dina obearbetade CSS-filer, medan "dest" -mappen kommer att ha dina PostCSS-bearbetade filer skrivna in i den.
Nästa sak du behöver göra är att installera plug-in för gulp-postcss i ditt projekt - vi ska använda det här för att hantera vår PostCSS-bearbetning.
I en terminal / kommandotolk som pekas på din projektmapp, kör kommandot:
npm installera - save-dev gulp-postcss
När installationen är klar ska din projektstruktur se ut så här:
Öppna nu din Gulpfile för redigering och skapa variabler för att ringa i modulerna "gulp" och "gulp-postcss" genom att lägga till följande kod:
Accentsconagua
var gulp = kräver ("gulp"); var postcss = kräver ("gulp-postcss");Vi kan nu konfigurera en uppgift att läsa en källa CSS-fil och bearbeta den via PostCSS.
Lägg till följande:
gulp.task ('css', funktion () var processorer = []; returnera gulp.src ('./ src / *. css') .pipe (postcss (processorer)) .pipe (gulp.dest ('. / dest ")););Låt oss bryta ner vad vi har i koden ovan.
I första raden har vi satt upp en gulp-uppgift som heter css. Denna uppgift exekverar en funktion, och inom den funktionen har vi skapat en uppgift som heter processorer. Just nu är arrayen tom, men i ett ögonblick fyller vi det med de PostCSS-plugins vi vill använda.
Efter processorer array vi har angett de filer vi vill rikta in för bearbetning: alla CSS-filer i mappen "src".
I den första av de två raderna använder man rör() funktion, ställer vi in PostCSS att utföra via funktionen postcss (). Som ett argument genom den funktionen passerar vi vår processorer array, som senare kommer att berätta för PostCSS vilka plugins vi vill använda.
Slutligen, med den andra av de två rör() funktioner, vi har vår bearbetade kod skriven till en ny CSS-fil i vår "dest" -mapp.
Gå vidare och skapa en ny "style.css" -fil i din "src" -mapp och lägg till några test-CSS till den, till exempel:
.test bakgrund: svart;
Nu i din terminal / kommandotolk, som fortfarande pekar på din projektmapp, kör kommandot:
gulp css
Detta kommer att utföra den uppgift du just installerade, och som ett resultat bör du nu hitta en ny "style.css" -fil i din "dest" -mapp.
När du öppnar den här nya filen ser du samma kod i den som i din källfil. Koden har inte ändrats eftersom vi inte har använt några PostCSS-plugins än, och som du kommer att veta från en tidigare handledning är det de plugin som utför de faktiska CSS-manipuleringarna.
Vi lägger nu till ett urval av PostCSS-plugins och -paket: Autoprefixer (lägger till leverantörs prefix), cssnext (möjliggör framtida syntax) och precss (utökar med Sass-liknande funktionalitet).
Kör följande kommandon för att installera varje plugin i ditt projekt:
npm installera autoprefixer - save-dev npm installera cssnext --save-dev npm installera precss - save-dev
Notera: The cssnext och precss installationer kan ta en stund eftersom de är förpackningar med flera plugins.
Därefter definierar vi variabler för att ladda in var och en i vårt projekt. Lägg till följande kod under de två befintliga variablerna högst upp i din Gulpfile:
var autoprefixer = kräver ("autoprefixer"); var cssnext = kräver ('cssnext'); var precss = kräver ("precss");Sedan lägger vi till dessa tre plugins till processorer array i vår gulp-uppgift. Uppdatera matrisen till följande:
var processorer = [autoprefixer, cssnext, precss];
Med de tre plugins som läggs till våra processorer array, kommer PostCSS veta att vi önskar att tillämpa var och en på vår källkod CSS.
Vi är nu redo att lägga till någon testkod i filen "src / style.css" och kontrollera att allt fungerar. Ta bort det du redan har i filen och lägg till den här CSS istället:
/ * Testa autoprefixer * / .autoprefixer display: flex; / * Testning cssnext * / .cssnext bakgrund: färg (röd alfa (-10%)); / * Testning av precss * / .precss @if 3 < 5 background: green; @else background: blue;
Springa det gulp css kommandot igen nu, och den resulterande filen i din "dest" -mapp ska ha följande innehåll:
/ * Testa autoprefixer * / .autoprefixer display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; / * Testning cssnext * / .cssnext bakgrund: rgba (255, 0, 0, 0,9); / * Pröva precss * / .precss background: green
Enligt ovanstående bör du se att leverantörs prefix har lagts till i första klass av Autoprefixer, an RGBA () Färgen har skrivits ut av cssnext i andra klassen och @om annat checken har utvärderats av PreCSS i tredje klassen.
Notera: Om du vill konfigurera alternativ för ett plugin lägger du till ett par parenteser efter namnet i preprocessorsystemet och skickar alternativen där. Du kan till exempel ange webbläsarlistan som du vill att Autoprefixer ska fungera på, så här:
var processorer = [autoprefixer (webbläsare: ['sista 1 version']), cssnext, precss];
Skönheten i PostCSS är i sin förmåga att konfigureras med vilken kombination av plugins som helst. Utmaningen som detta leder framåt är dock att andra som vill arbeta med ett projekt har samma inställning av PostCSS-plugins. Tack vare NPM hanteras denna utmaning genom sitt system för dependency management.
Eftersom du använder --spara-dev flagga varje gång du installerar ett plugin i ditt projekt, läggs det till i din "project.json" -fil som en dev dependence. Detta innebär att om du vill dela ditt projekt med andra kan de köra kommandot npm installera på paketet du delar med dem och har alla samma plugin automatiskt installerade.
För att lära dig mer om hur beroendehantering fungerar med NPM, kolla in handledningen Kommandoraden för webbdesign: Taming 3: e paket.
För att sammanfatta ovanstående:
processorer arraypostcss () funktion, med processorer array passerade som ett argumentDärifrån kan du följa samma väsentliga steg för att möjliggöra något PostCSS-plugin i ditt projekt:
npm installera --spara-dev var autoprefixer = kräver ("autoprefixer"); förprocessorer array.Kolla in Github repo för startfiler och färdiga exempel.
I nästa handledning täcker vi hur du installerar ett PostCSS-projekt i den andra av de två stora uppgiftslöparna: Grunt. Vi ses där!
