PostCSS Quickstart Guide Grunt Setup

I den sista handledningen gick vi igenom hur man installerade ett PostCSS-projekt med Gulp. I denna handledning kommer vi att uppnå samma ändamål, med hjälp av Grunt. I slutet av denna handledning vet du hur du installerar ett PostCSS + Grunt-projekt med val av plugins du väljer.

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.

förutsättningar

Eftersom vi ska arbeta med Grunt antar vi att du redan har förutsättningarna för användningen installerad:

• Node.js
• NPM
• Git

Om du inte är säker på om du har installerat dessa, följ instruktionen Kommandoraden för webbdesign: Taming 3: e paket.

Se till att du har Grunt CLI installerad globalt och förstår dess grundläggande användning genom att följa Kommandoraden för webbdesign: Automation med Grunt. Dessutom följer instruktionerna i handledningens avsnitt "Installationsprojekt för grunt". Innan du går vidare bör du ha en projektmapp med:

• En "gruntfile.js" (Gruntfile)
• En "package.json" -fil
• Grunt installeras i mappen "node_modules" och ställer in som en dev dependence för ditt projekt.

PostCSS via Grunt

Till din projektmapp lägg till två undermappar, en som heter "src" och den andra som heter "dest". "Src" -mappen kommer att hålla dina obehandlade CSS-filer och PostCSS skriver dina sammanställda CSS-filer i mappen "dest".

Nästa sak du behöver göra är att installera Grunt-plugin för PostCSS i ditt projekt: vi använder grunt-postcss för hantering av kompilering.

I en terminal / kommandotolk som pekas på din projektmapp, kör kommandot:

npm installera grunt-postcss - save-dev

Vid denna tidpunkt ska din projektstruktur se ut så här:

Öppna din Gruntfile för redigering och börja med att lägga till det grundläggande skalet av kod som alla Gruntfiles kräver:

module.exports = funktion (grunt) ;

Inuti det ska vi använda grunt.loadNpmTasks () funktion att ladda i vår grunt-postcss plugin som så:

module.exports = funktion (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;

Nu är vi redo att börja konfigurera Grunt-uppgiften som vi ska använda för att köra postcss. Lägg först till grunt.initConfig () funktion ovanför linjen vi just lagt till:

module.exports = funktion (grunt) grunt.initConfig (); grunt.loadNpmTasks ( 'grunt-postcss'); ;

Inuti det, konfigurera ett objekt som heter postcss såhär:

module.exports = funktion (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ( 'grunt-postcss'); ;

Inuti den nya postcss objekt vi lägger till ytterligare två nestade objekt, en namngiven alternativ och en namngiven dist:

module.exports = funktion (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ( 'grunt-postcss'); ;

De alternativ objektet kommer att hålla konfigurationen för PostCSS och dist objekt kommer att hålla information om var våra CSS-filer ska läsas från och skrivet till.

Fortsätt nu och skapa en CSS-fil med namnet "style.css" i projektets "src" -mapp. Lägg till någon testkod till den, till exempel:

.test bakgrund: svart; 

Uppdatera nu dist objekt att ange "src / style.css" som vår källfil och "dest / style.css" som filen vi vill generera:

 dist: src: 'src / style.css', dest: 'dest / style.css'

Sedan inuti alternativ objekt, lägg till en tom array som heter processorer. Det är här vi ska konfigurera PostCSS-plugins för användning lite senare. För närvarande uppdatera det bara till:

 alternativ: processorer: [],

Kör en testkompilering

Din grundläggande postcss uppgiften är nu klar att gå. För att testa det, kör din kommando med din terminal / kommandotolk som fortfarande pekar på din projektmapp.

grunt postcss

I din terminal bör du se detta meddelande:

Running "postcss: dist" (postcss) uppgift >> 1 bearbetat stylesheet skapat.

Och nu i din "dest" -mapp borde du hitta en ny "style.css" -fil som innehåller samma kod som filen "style.css" i mappen "src".

Lägg till PostCSS-plugin

Nästa lägger vi 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-funktionalitet).

Kör följande kommandon för att installera var och en 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.

Nu är vi redo att ladda alla plugins via processorer array vi skapade tidigare. Uppdatera den här matrisen till följande:

 processorer: [kräver ('autoprefixer') (), kräver ('cssnext') (), kräver ('precss') ()]

Låt oss fortsätta lägga nu till en testkod i vår källkod "style.css" -fil och kontrollera att våra nyinstallerade PostCSS-plugins fungerar som förväntat. 

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 grunt postcss 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

Du kommer att se i .autoprefixer klass, leverantörs prefix har lagts till av Autoprefixer. I .cssnext klass, an RGBA () färg har genererats av cssnext. Och äntligen i .precss klass, the @om annat villkorligt har utvärderats av PreCSS.

Inställning av pluginalternativ

Observera, om du vill konfigurera alternativ för ett plugin, skicka dina alternativ genom det andra paret parentes efter fordra() funktion för det plugin. Du kan till exempel ange webbläsarlistan som du vill att Autoprefixer ska fungera på, så här:

 processorer: [kräver ('autoprefixer') (webbläsare: ['last 1 version']), kräver ('cssnext') (), kräver ('precss')

Dela ditt projekt

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.

Låt oss läsa om

I sammanfattning av allt som omfattas ovan:

• Skapa ett npm-projekt med Grunt installerat och en Gruntfile inuti
• Installera grunt-postcss-plugin
• Ställ in ditt Gruntfile-skal, ladda grunt-postcss med grunt.loadNpmTasks ( 'grunt-postcss');
• Skapa en grunt uppgift för att kompilera din CSS
• Inom uppgiften ska du ange en alternativ objekt som innehåller a processorer array
• Också inom uppgiften, setup a dist objekt som anger dina källfiler och destinationen för kompilerade filer

Därifrån kan du följa samma väsentliga steg för att möjliggöra något PostCSS-plugin i ditt projekt:

• Installera plugin i ditt projekt med 
  npm installera --spara-dev
• Lägg till det variabla namnet i din förprocessorer array med funktionen require ()
  fordra('') ().

Kolla in Github repo för startfiler och färdiga exempel.

Upp Nästa: Exploring Plugins

Nu vet du hur du använder antingen Gulp eller Grunt för att använda PostCSS med alla plugins du väljer. Nästa sak du behöver är ett sätt att utforska PostCSS-plugins ekosystem och hitta bra plugins som är perfekta för det slags projekt du vill skapa.

Vi går igenom exakt hur du kan göra det i nästa handledning. "Quickstart Guide: Exploring Plugins".