Share
In de laatste zelfstudie hebben we besproken hoe u direct kunt beginnen met PostCSS met CodePen of Prepros. Deze opties zijn geweldig, maar beperkend omdat u niet kunt bepalen welke plug-ins voor u beschikbaar zijn.
In deze zelfstudie bespreken we hoe u PostCSS kunt gebruiken met de taak loper Gulp, zodat u zelf kunt beslissen welke plug-ins u wilt gebruiken en dus echt het plugin-ecosysteem kunt gebruiken.
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 Gulp werken, gaan we ervan uit dat je al de vereisten hebt voor het gebruik van Gulp:
Als u niet zeker weet of u deze hebt geïnstalleerd, volgt u de tutorial De opdrachtregel voor webontwerp: derde-partijpakketten temmen omdat u door deze voorwaarden moet komen.
Zorg er ook voor dat u de basisprincipes van Gulp-gebruik begrijpt door de zelfstudie te volgen. De opdrachtregel voor webontwerp: automatisering met Gulp. Volg daarnaast de instructies in het gedeelte "Setup Project for Gulp" van de zelfstudie. Voor je verder gaat, zou je een projectmap moeten hebben met:
In uw projectmap maakt u twee submappen, de ene met de naam "src" en de andere met de naam "dest". In de map "src" worden uw onbewerkte CSS-bestanden bewaard, terwijl in de map "dest" de door PostCSS verwerkte bestanden erin worden geschreven.
Het volgende dat u moet doen is de gulp-postcss-plug-in in uw project installeren - we zullen dit gebruiken om onze PostCSS-verwerking aan te pakken.
Voer de opdracht uit in een terminal / opdrachtprompt die naar uw projectmap verwijst:
npm install --save-dev gulp-postcss
Nadat de installatie is voltooid, ziet uw projectstructuur er als volgt uit:
Open nu uw Gulpfile voor bewerking en maak variabelen om zowel de "gulp" - als de "gulp-postcss" -modules op te roepen door de volgende code toe te voegen:
Accentsconagua
var gulp = vereisen ('gulp'); var postcss = require ('gulp-postcss');We kunnen nu een taak instellen om een bron-CSS-bestand te lezen en het via PostCSS te verwerken.
Voeg het volgende toe:
gulp.task ('css', function () var processors = []; return gulp.src ('./ src / *. css') .pipe (postcss (processors)) .pipe (gulp.dest ('. / dest ')););Laten we opsplitsen wat we hebben in de bovenstaande code.
In de eerste regel hebben we een sliktaak ingesteld met de naam css. Deze taak voert een functie uit en binnen die functie hebben we een array met de naam gemaakt processors. Op dit moment is die array leeg, maar in een oogwenk vullen we dat aan met de PostCSS-plugins die we willen gebruiken.
Na de processors array we hebben de bestanden gespecificeerd die we willen targeten voor verwerking: alle CSS-bestanden in de map "src".
In de eerste van de twee regels met behulp van de pijp() functie, stellen we PostCSS in om uit te voeren via de functie postcss (). Als een argument door die functie passeren we onze processors array, die later PostCSS zal vertellen welke plug-ins we willen gebruiken.
Eindelijk, met de tweede van de twee pijp() functies, we hebben onze verwerkte code geschreven in een nieuw CSS-bestand in onze "dest" -map.
Ga je gang en maak een nieuw "style.css" bestand aan in je "src" map en voeg wat test CSS toe zoals:
.test achtergrond: zwart;
Plaats nu in de terminal / opdrachtprompt, nog steeds gewezen op uw projectmap, de opdracht:
slok css
Dit zal de taak uitvoeren die u zojuist hebt ingesteld, en als gevolg hiervan zou u nu een nieuw "style.css" bestand in uw "dest" map moeten vinden.
Wanneer u dit nieuwe bestand opent, ziet u een identieke code in die van uw bronbestand. De code is niet veranderd omdat we nog geen PostCSS-plug-ins hebben gebruikt en zoals u uit een eerdere zelfstudie zult weten, zijn het de plug-ins die de feitelijke CSS-manipulaties uitvoeren.
We voegen nu een selectie van PostCSS-plug-ins en -pakketten toe: Autoprefixer (voegt voorvoegsels van leveranciers toe), cssnext (schakelt toekomstige syntaxis in) en precss (wordt uitgebreid met Sass-achtige functionaliteit).
Voer de volgende opdrachten uit om elke plug-in 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.
Vervolgens zullen we variabelen definiëren om in elk project in ons project te laden. Voeg de volgende code toe onder de twee bestaande variabelen bovenaan uw Gulpfile:
var autoprefixer = require ('autoprefixer'); var cssnext = require ('cssnext'); var precss = require ('precss');Vervolgens voegen we deze drie plug-ins toe aan de processors array in onze sliktaak. Werk de array bij naar het volgende:
var processors = [autoprefixer, cssnext, precss];
Met de drie plug-ins die aan onze array met processoren zijn toegevoegd, weet PostCSS dat we elk een toepassing willen toepassen op onze bron-CSS.
We zijn nu klaar om een aantal testcode toe te voegen aan ons "src / style.css" -bestand en controleren dat alles werkt. 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 slok css 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
Zoals hierboven vermeld, zou u moeten zien dat voorvoegsels van leveranciers aan de eerste klasse zijn toegevoegd door Autoprefixer, een RGBA () kleur is uitgevoerd door cssnext in de tweede klasse, en de @if @else controle is geëvalueerd door PreCSS in de derde klas.
Notitie: als u opties voor een plug-in wilt configureren, voegt u na de naam in de reeks van preprocessors een paar haakjes toe en geeft u de opties daar door. U kunt bijvoorbeeld de browselijst opgeven die u met Autoprefixer wilt laten werken, zoals:
var processors = [autoprefixer (browsers: ['last 1 version']), cssnext, 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.
Om het bovenstaande samen te vatten:
processors rangschikkingpostcss () functie, met de processors array doorgegeven als een argumentVan daaruit kunt u dezelfde essentiële stappen volgen om elke PostCSS-plug-in in uw project in te schakelen:
npm installeren --save-dev var autoprefixer = require ('autoprefixer'); preprocessors rangschikking.Bekijk de Github-repo voor startersbestanden en voltooide voorbeelden.
In de volgende zelfstudie bespreken we hoe een PostCSS-project kan worden opgezet in de andere grote taakgroep: Grunt. Zie je daar!
