Share
In de laatste zelfstudie hebben we besproken hoe een PostCSS-project met Gulp kan worden opgezet. In deze tutorial bereiken we dezelfde doelen door Grunt te gebruiken. Aan het einde van deze tutorial zul je weten hoe je een PostCSS + Grunt-project opzet met elke selectie van plug-ins die je kiest.
Notitie: Als je nog nooit met een opdrachtregel of taakgroep hebt gewerkt, raad ik je aan om voordat je aan deze zelfstudie begint onze gratis reeks te bekijken: De opdrachtregel voor webontwerp.
Aangezien we met Grunt werken, gaan we ervan uit dat je al de vereisten hebt voor het gebruik dat is geïnstalleerd:
Als u niet zeker weet of u deze hebt geïnstalleerd, volgt u de tutorial. De opdrachtregel voor webontwerp: het beheren van pakketten van derden.
Zorg ervoor dat u Grunt CLI wereldwijd hebt geïnstalleerd en begrijp het basisgebruik ervan door de opdrachtregel voor webontwerp te volgen: Automation with Grunt. Volg daarnaast de instructies in het gedeelte "Setup Project for Grunt" van de zelfstudie. Voor je verder gaat, zou je een projectmap moeten hebben met:
Voeg in je projectmap twee submappen toe, een met de naam "src" en de andere met de naam "dest". In de map "src" worden uw onbewerkte CSS-bestanden bewaard en PostCSS zal uw gecompileerde CSS-bestanden in de map "dest" schrijven.
Het volgende dat u moet doen, is de Grunt-plug-in voor PostCSS in uw project installeren: we zullen grunt-postcss gebruiken om met de compilatie om te gaan.
Voer de opdracht uit in een terminal / opdrachtprompt die naar uw projectmap verwijst:
npm install grunt-postcss --save-dev
Op dit punt zou uw projectstructuur er als volgt uit moeten zien:
Open je Gruntfile voor bewerking en begin met het toevoegen van de basishell van code die alle Gruntfiles nodig hebben:
module.exports = functie (grunt) ;
Daarbinnen gaan we de gebruiken grunt.loadNpmTasks () functie om te laden in onze grunt-postcss plugin zoals zo:
Accentsconagua
module.exports = functie (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Nu zijn we klaar om te beginnen met het configureren van de Grunt-taak die we zullen gebruiken om postcss uit te voeren. Voeg eerst de grunt.initConfig () functie boven de regel die we zojuist hebben toegevoegd:
module.exports = functie (grunt) grunt.initConfig (); grunt.loadNpmTasks ( 'grunt-postcss); ;
Daarbinnen, stel een object in met de naam postcss zoals zo:
module.exports = functie (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ( 'grunt-postcss); ;
In het nieuwe postcss object zullen we nog twee geneste objecten toevoegen, één met een naam opties en een met de naam dist:
module.exports = functie (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ( 'grunt-postcss); ;
De opties object bevat de configuratie voor PostCSS en de dist object bevat informatie over waar onze CSS-bestanden moeten worden gelezen van en geschreven naar.
Ga nu verder en maak een CSS-bestand met de naam "style.css" in de map "src" van uw project. Voeg wat testcode toe, zoals:
.test achtergrond: zwart;
Werk nu het dist object om "src / style.css" als ons bronbestand op te geven, en "dest / style.css" als het bestand dat we willen genereren:
dist: src: 'src / style.css', dest: 'dest / style.css'
Vervolgens, binnen de opties object, voeg een lege array toe met de naam processors. Dit is waar we PostCSS-plug-ins voor iets later zullen configureren. Werk het nu bij tot:
opties: processors: [],
Je basis postcss taak is nu klaar voor gebruik. Om het uit te testen, met uw terminal / opdrachtprompt nog steeds gericht op uw projectmap, voert u de opdracht uit:
grunt postcss
In uw terminal zou u dit bericht moeten zien:
Running "postcss: dist" (postcss) taak >> 1 bewerkte stylesheet aangemaakt.
En nu zou je in je "dest" map een nieuw "style.css" bestand moeten vinden, dat dezelfde code bevat als het "style.css" bestand in je "src" map.
Vervolgens zullen we een selectie van PostCSS-plug-ins en -pakketten toevoegen: Autoprefixer (voegt voorvoegsel van leverancier toe), cssnext (schakelt toekomstige syntaxis in) en precss (wordt uitgebreid met Sass-achtige functionaliteit).
Voer de volgende opdrachten uit om elke opdracht in uw project te installeren:
npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev
Notitie: De cssnext en precss installaties kunnen een tijdje duren, want het zijn pakketten met meerdere plug-ins.
Nu zijn we klaar om alle plug-ins te laden via de processors array die we eerder hebben gemaakt. Werk die array bij naar het volgende:
processors: [require ('autoprefixer') (), require ('cssnext') (), require ('precss') ()]Laten we nu beginnen met het toevoegen van een aantal testcode aan ons bron "style.css" -bestand en controleren of onze nieuw ingestelde PostCSS-plug-ins werken zoals verwacht.
Verwijder wat je al hebt in het bestand en voeg in plaats daarvan deze CSS toe:
/ * Autoprefixer * / .autoprefixer testen weergave: flex; / * Testen cssnext * / .cssnext background: color (red alpha (-10%)); / * Testen precss * / .precss @if 3 < 5 background: green; @else background: blue;
Voer de ... uit grunt postcss opnieuw commando, en het resulterende bestand in uw "dest" -map zou de volgende inhoud moeten hebben:
/ * Autoprefixer * / .autoprefixer testen display: -webkit-box; weergave: -webkit-flex; weergave: -ms-flexbox; weergave: flex; / * Testen cssnext * / .cssnext background: rgba (255, 0, 0, 0.9); / * Press testen * / .precss background: green
Je zult het zien in de .autoprefixer klassenvoorvoegsels van leveranciers zijn toegevoegd door Autoprefixer. In de .cssnext klas, een RGBA () kleur is gegenereerd door cssnext. En tot slot in de .precss klas, de @if @else Voorwaardelijk is geëvalueerd door PreCSS.
Opmerking: als u opties voor een plug-in wilt configureren, geeft u uw opties door tussen het tweede paar haakjes na de vereisen() functie voor die plug-in. U kunt bijvoorbeeld de browselijst opgeven die u met Autoprefixer wilt laten werken, zoals:
processors: [require ('autoprefixer') (browsers: ['last 1 version']), require ('cssnext') (), require ('precss') ()]Het mooie van PostCSS is dat het kan worden geconfigureerd met elke combinatie van plug-ins. De uitdaging die dit met zich meebrengt, is echter ervoor zorgen dat andere mensen die aan een project willen werken dezelfde PostCSS-plug-ins hebben. Dankzij npm wordt deze uitdaging aangepakt via het systeem van afhankelijkheidsbeheer.
Omdat u de --save-dev markeer elke keer dat u een plug-in in uw project installeert deze als een dev-afhankelijkheid aan uw "project.json" -bestand. Dit betekent dat als u uw project met anderen wilt delen, zij het commando kunnen uitvoeren npm installeren op het pakket dat u met hen deelt en hebben alle dezelfde plug-ins automatisch geïnstalleerd.
Voor meer informatie over hoe afhankelijkheidsbeheer werkt met NPM, raadpleegt u de zelfstudie De opdrachtregel voor webontwerp: derde-partijpakketten temmen.
Samenvattend van alles wat hierboven is behandeld:
grunt.loadNpmTasks ( 'grunt-postcss); opties object met een processors rangschikkingdist object dat uw bronbestanden en de bestemming voor gecompileerde bestanden opgeeftVan daaruit kunt u dezelfde essentiële stappen volgen om elke PostCSS-plug-in in uw project in te schakelen:
npm installeren --save-dev preprocessors array met de functie require ()vereisen('') () .Bekijk de Github-repo voor startersbestanden en voltooide voorbeelden.
Nu weet u hoe u Gulp of Grunt moet gebruiken om PostCSS te gebruiken met elke plug-in die u kiest. Het volgende dat je nodig hebt is een manier om het PostCSS-plugin-ecosysteem te verkennen en geweldige plug-ins te vinden die perfect zijn voor het soort projecten dat je wilt maken.
We zullen precies zien hoe je dat kunt doen in de volgende tutorial; "Snelstartgids: Plug-ins verkennen".
