Share
I den siste opplæringen dekket vi hvordan du kan komme i gang med PostCSS umiddelbart ved hjelp av CodePen eller Prepros. Disse alternativene er flotte, men begrensende fordi du ikke får kontroll over hvilke plugins som er tilgjengelige for deg å bruke.
I denne opplæringen vil vi gå gjennom hvordan du kan bruke PostCSS med oppgaveløperen Gulp, slik at du selv bestemmer hvilke plugins du vil bruke og dermed virkelig tapper inn i plugin-økosystemet.
Merk: Hvis du aldri har jobbet med kommandolinje eller oppgaveløpere før, anbefaler jeg at før du starter denne opplæringen, sjekk ut vår gratis serie: Kommandolinjen for webdesign.
Gitt at vi skal jobbe med Gulp, antar vi at du allerede har forutsetningene for bruken sin installert:
Hvis du ikke er sikker på at du har disse installert, må du følge veiledningen Kommandolinjen for webdesign: Taming 3parts-pakker som det vil ta deg gjennom å få disse forutsetningene på plass.
Vær også sikker på at du forstår grunnleggende ved bruk av Gulp ved å følge opplæringen. Kommandolinjen for webdesign: Automatisering med Gulp. I tillegg følger instruksjonene i opplæringsprogrammet "Oppsettprosjekt for gulp". Før du går videre, bør du ha en prosjektmappe med:
Inne i prosjektmappen din opprett to undermapper, en som heter "src" og en som heter "dest". "Src" -mappen skal holde dine ubehandlede CSS-filer, mens "dest" -mappen vil ha dine PostCSS-behandlede filer skrevet inn i det.
Den neste tingen du trenger å gjøre er å installere plug-in-plugin-modulen i prosjektet ditt - vi bruker dette til å håndtere vår PostCSS-prosessering.
I en terminal / kommandoprompt peket på prosjektmappen din, kjør kommandoen:
npm installere - save-dev gulp-postcss
Etter at installasjonen er fullført, bør prosjektstrukturen se slik ut:
Nå åpner du Gulpfile for redigering og lager variabler for å ringe i både modulene "gulp" og "gulp-postcss" ved å legge til følgende kode:
Accentsconagua
var gulp = krever ('gulp'); var postcss = krever ('gulp-postcss');Vi kan nå sette opp en oppgave å lese en kilde CSS-fil og behandle den gjennom PostCSS.
Legg til følgende:
gulp.task ('css', funksjon () var prosessorer = []; return gulp.src ('./ src / *. css') .pipe (postcss (prosessorer)) .pipe (gulp.dest ('. / dest '));;La oss bryte ned det vi har i koden ovenfor.
I første linje har vi satt opp en gulp-oppgave som heter css. Denne oppgaven utfører en funksjon, og i den funksjonen har vi opprettet en oppstilling som heter prosessorer. Akkurat nå er arrayen tom, men i et øyeblikk fyller vi det med PostCSS-pluginene vi vil bruke.
Etter prosessorer array vi har angitt filene vi vil målrette mot for behandling: noen CSS-filer i mappen "src".
I den første av de to linjene bruker du rør() funksjon, setter vi inn PostCSS til å utføre via funksjonen postcss (). Som et argument gjennom den funksjonen passerer vi vår prosessorer array, som senere vil fortelle PostCSS hvilke plugins vi vil bruke.
Til slutt, med den andre av de to rør() funksjoner, vi har vår behandlede kode skrevet inn i en ny CSS-fil i vår "dest" -mappe.
Gå videre og opprett en ny "style.css" -fil i "src" -mappen din og legg til noen test-CSS på den, for eksempel:
.test bakgrunn: svart;
Nå i din terminal / kommandoprompt, fremdeles spilt på prosjektmappen din, kjør kommandoen:
gulp css
Dette vil løse oppgaven du bare har installert, og som et resultat bør du nå finne en ny "style.css" -fil i "dest" -mappen din.
Når du åpner denne nye filen, ser du den samme koden i den som i kildefilen din. Koden er ikke endret fordi vi ikke har brukt noen PostCSS-plugins ennå, og som du vil vite fra en tidligere opplæring, er det pluginene som utfører de faktiske CSS-manipulasjonene.
Vi legger nå et utvalg av PostCSS-plugins og -pakker: Autoprefixer (legger til leverandørprefikser), cssnext (aktiverer fremtidig syntaks) og press (strekker seg med Sass-lignende funksjonalitet).
Kjør følgende kommandoer for å installere hvert plugin i prosjektet ditt:
npm installere autoprefixer - save-dev npm installere cssnext --save-dev npm installere precss - save-dev
Merk: Den cssnext og precss installasjoner kan ta litt tid da de er pakker med flere plugins.
Deretter definerer vi variabler for å laste inn hver enkelt i vårt prosjekt. Legg til følgende kode under de to eksisterende variablene øverst i Gulpfile:
var autoprefixer = krever ('autoprefixer'); var cssnext = krever ('cssnext'); var precss = krever ('press');Da legger vi til disse tre pluginene til prosessorer array i vår gulp-oppgave. Oppdater oppsettet til følgende:
var prosessorer = [autoprefixer, cssnext, precss];
Med de tre plugins som er lagt til vår prosessor array, vil PostCSS vite at vi ønsker å søke hver til vår kilde CSS.
Vi er nå klare til å legge til noen testkode i filen "src / style.css" og sjekke at alt fungerer. Slett det du allerede har i filen, og legg til dette CSS i stedet:
/ * Testing autoprefixer * / .autoprefixer display: flex; / * Testing cssnext * / .cssnext bakgrunn: farge (rød alfa (-10%)); / * Prøving av prese * / .precss @if 3 < 5 background: green; @else background: blue;
Kjør gulp css kommandoen igjen nå, og den resulterende filen i "dest" -mappen din skal ha følgende innhold:
/ * Testing autoprefixer * / .autoprefixer display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; / * Testing cssnext * / .cssnext bakgrunn: rgba (255, 0, 0, 0,9); / * Prøveprøve * / .precss bakgrunn: grønn
Som i det ovenstående, bør du se leverandørprefikser er lagt til i første klasse av Autoprefixer, an RGBA () fargen har blitt utgitt av cssnext i andre klasse, og @if @else sjekk har blitt vurdert av PreCSS i tredje klasse.
Merk: Hvis du vil konfigurere alternativer for et plugin, legger du til et par braketter etter navnet i preprosessorsystemet og sender alternativene der. For eksempel kan du angi nettleserlisten du vil at Autoprefixer skal fungere som:
var prosessorer = [autoprefixer (nettlesere: ['siste 1 versjon']), cssnext, press];
Skjønnheten i PostCSS er i sin evne til å bli konfigurert med en hvilken som helst kombinasjon av plugins. Utfordringen dette bringer frem, er imidlertid å sikre at andre som ønsker å jobbe med et prosjekt, har samme oppsett av PostCSS-plugins. Takket være npm håndteres denne utfordringen gjennom sitt system for avhengighetsstyring.
Fordi du bruker --save-dev flagg hver gang du installerer et plugin i prosjektet ditt, vil det bli lagt til din "project.json" -fil som en dev dependence. Dette betyr at hvis du vil dele prosjektet med andre, kan de kjøre kommandoen npm installasjon På pakken deler du med dem og har alle de samme pluginene automatisk installert.
For å lære mer om hvordan avhengighetsadministrasjon fungerer med NPM, sjekk opp veiledningen Kommandolinjen for webdesign: Taming 3partspakker.
For å oppsummere ovenstående:
prosessorer matrisepostcss () funksjon, med prosessorer array passert som et argumentDerfra kan du følge de samme viktige trinnene for å aktivere et PostCSS-plugin i prosjektet ditt:
npm installasjon --save-dev var autoprefixer = krever ('autoprefixer'); preprocessors matrise.Sjekk ut Github repo for startfiler og fullførte eksempler.
I neste veiledning vil vi dekke hvordan du konfigurerer et PostCSS-prosjekt i den andre av de to store oppgavene: Grunt. Ser deg der!
