Share
I den siste opplæringen gikk vi gjennom hvordan du oppretter et PostCSS-prosjekt med Gulp. I denne opplæringen vil vi oppnå samme mål, ved å bruke Grunt. Ved slutten av denne opplæringen vet du hvordan du konfigurerer et PostCSS + Grunt-prosjekt med et utvalg av plugins du velger.
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.
Da vi skal jobbe med Grunt, antar vi at du allerede har forutsetningene for bruken sin installert:
Hvis du ikke er sikker på om du har installert disse, følger du veiledningen Kommandolinjen for webdesign: Taming 3partspakker.
Sørg for at du har Grunt CLI installert globalt og forstå grunnleggende bruk ved å følge kommandolinjen for webdesign: Automatisering med Grunt. I tillegg følger instruksjonene i opplæringsprogrammet "Oppsettprosjekt for grunt". Før du går videre, bør du ha en prosjektmappe med:
I prosjektmappen legges to undermapper, en som heter "src" og den andre som heter "dest". "Src" -mappen vil holde dine ubehandlede CSS-filer, og PostCSS vil skrive dine kompilerte CSS-filer inn i "dest" -mappen.
Den neste tingen du trenger å gjøre er å installere Grunt-pluginet for PostCSS i prosjektet ditt: Vi bruker grunt-postcss til å håndtere kompilering.
I en terminal / kommandoprompt peket på prosjektmappen din, kjør kommandoen:
npm installere grunt-postcss - save-dev
På dette punktet bør prosjektstrukturen se slik ut:
Åpne Gruntfile for redigering og start med å legge til grunnskjellet av kode som alle Gruntfiles krever:
module.exports = funksjon (grunt) ;
Innenfor, skal vi bruke grunt.loadNpmTasks () funksjon å laste inn i vår grynt-postcss Plugin slik:
Accentsconagua
module.exports = funksjon (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Nå er vi klare til å begynne å konfigurere Grunt-oppgaven vi skal bruke til å kjøre postcss. Først legger du til grunt.initConfig () fungere over linjen vi nettopp har lagt til:
module.exports = funksjon (grunt) grunt.initConfig (); grunt.loadNpmTasks ( 'grov-postcss'); ;
Inne i det, sett opp et objekt som heter postcss som så:
module.exports = funksjon (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ( 'grov-postcss'); ;
Inne i det nye postcss objekt vi legger til to flere nestede objekter, en som heter opsjoner og en som heter dist:
module.exports = funksjon (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ( 'grov-postcss'); ;
De opsjoner objektet vil holde konfigurasjonen for PostCSS, og dist objektet vil holde informasjon om hvor våre CSS-filer skal leses fra og skrevet til.
Gå videre nå og opprett en CSS-fil med navnet "style.css" i prosjektets "src" -mappe. Legg til noen testkoden til den, for eksempel:
.test bakgrunn: svart;
Oppdater nå dist motsette seg å angi "src / style.css" som vår kildefil, og "dest / style.css" som filen vi vil generere:
dist: src: 'src / style.css', dest: 'dest / style.css'
Deretter inne i opsjoner objekt, legg til en tom array som heter prosessorer. Det er her vi skal konfigurere PostCSS-plugins for bruk litt senere. For øyeblikket, oppdater det bare til:
alternativer: prosessorer: [],
Din grunnleggende postcss oppgaven er nå klar til å gå. For å teste det, kjører du kommandoen med din terminal / kommandoprompt fremdeles på prosjektmappen din:
grunt postcss
I terminalen din bør du se denne meldingen:
Running "postcss: dist" (postcss) oppgave >> 1 behandlet stilark opprettet.
Og nå i "dest" -mappen din, bør du finne en ny "style.css" -fil som inneholder samme kode som "style.css" -filen i mappen "src".
Deretter legger vi til et utvalg av PostCSS plugins og pakker: Autoprefixer (legger til leverandør prefiks), cssnext (aktiverer fremtidig syntaks) og press (strekker seg med Sass liker funksjonalitet).
Kjør følgende kommandoer for å installere hver enkelt 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.
Nå er vi klare til å laste hver plugin via prosessorer array vi opprettet tidligere. Oppdater oppsettet til følgende:
prosessorer: [krever ('autoprefixer') (), krever ('cssnext') (), krever ('precss') ()]La oss fortsette nå legg til noen testkode til vår kilde "style.css" -fil og kontroller at våre nylig opprettede PostCSS-plugins fungerer som forventet.
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 grunt postcss 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
Du vil se i .autoprefixer klasse, leverandør prefiks har blitt lagt til av Autoprefixer. I .cssnext klasse, an RGBA () fargen er generert av cssnext. Og til slutt i .precss klasse, den @if @else betinget har blitt vurdert av PreCSS.
Merk, hvis du vil konfigurere alternativer for et plugin, send dine alternativer gjennom det andre paret parentes etter kreve () funksjon for det pluginet. For eksempel kan du angi nettleserlisten du vil at Autoprefixer skal fungere som:
prosessorer: [krever ('autoprefixer') (nettlesere: ['siste 1 versjon']), krever ('cssnext') (), krever ('precss')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.
I sammendrag av alt som er dekket over:
grunt.loadNpmTasks ( 'grov-postcss'); opsjoner objekt som inneholder a prosessorer matrisedist objekt angi kildefiler og destinasjon for kompilerte filerDerfra kan du følge de samme viktige trinnene for å aktivere et PostCSS-plugin i prosjektet ditt:
npm installasjon --save-dev preprocessors array ved hjelp av require () -funksjonenkreve ('') () .Sjekk ut Github repo for startfiler og fullførte eksempler.
Nå vet du hvordan du bruker enten Gulp eller Grunt til å bruke PostCSS med alle plugins du velger. Den neste tingen du trenger, er en måte å utforske PostCSS-plugin-økosystemet og finne gode plugins som er perfekte for hva slags prosjekter du vil lage.
Vi går gjennom nøyaktig hvordan du kan gjøre det i neste opplæring; "Quickstart Guide: Exploring Plugins".
