Share
In deze tutorial laat ik je zien hoe je Grunt en PurifyCSS gebruikt om met een minimale inspanning een superlichte stylesheet te maken. We zullen het installeren en dan leren hoe we het kunnen uitvoeren met en zonder Grunt, om ons veel meer performante stijlen te geven.
PurifyCSS is een JavaScript-tool die je markup-bestanden parseert (HTML, PHP of zelfs JavaScript) en vervolgens kruisverwijzingen naar alle CSS die je gebruikt. Alle selectors in uw CSS die niet worden gebruikt, worden verwijderd, zodat u alleen de stijlen over hebt die u echt nodig hebt.
Om PurifyCSS te installeren, kun je ofwel de repo direct van GitHub pakken, of installeren via npm (meer details over hoe dat gedaan is via deze tutorial van Kezz).
Installeren via npmDe bestanden die we zullen gebruiken om PurifyCSS aan te tonen, zijn een volledige Bootstrap-stylesheet en een index.html. Je kunt ze pakken uit de bronrep. Het index.html-bestand is vrij eenvoudig; er is alleen een heldensectie, met enkele knoppen, formulierelementen en het Bootstrap-raster; we hebben zeker niet de hele bibliotheek met Bootstrap-stijlen nodig.
Het volledige Bootstrap-stylesheetOm PurifyCSS op dit stylesheet uit te voeren, gaat u naar de opdrachtregelprompt, navigeert u naar de projectmap en voert u een opdracht uit met het volgende:
Accentsconagua
purifycss commando om dingen uit te schoppen--min als we willen dat de resulterende CSS verkleind wordt--uit waarna we kunnen specificeren waar we willen dat het resulterende bestand wordt opgeslagen--info als we willen dat het proces wordt vastgelegd in de terminal--verworpen die, indien opgenomen, alle selectors registreert die zijn geweigerd van het bronk stylesheetOns laatste commando ziet er als volgt uit:
purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info --rejected
Het bronstijlblad is geknipt met ruim 100 Kb, goed gedaan!
Om ons proces nog verder te automatiseren, kunnen we een taakrunner zoals Grunt gebruiken. Als we teruggaan naar ons startpunt, moeten we een package.json toevoegen aan ons project. Het uitvoeren van npm init vanuit onze map zal ons door een package.json creatieproces leiden, in wezen een bestand met de volgende details:
"name": "purifycss", "version": "1.0.0", "description": "Een bestand voor het testen van Grunt PurifyCSS", "main": "index.js", "scripts": "test" : "echo \" Fout: geen test opgegeven \ "&& exit 1", "auteur": "Adi Purdila", "license": "ISC",
Als we dit niet al hebben, moeten we Grunt installeren:
npm install grunt - save
Als dat klaar is zie je dat er een map met "node_modules" aan je project is toegevoegd.
Vervolgens moeten we de Grunt-plug-in voor PurifyCSS installeren.
npm install grunt-purifycss --save
Nu moeten we een bestand maken met de naam gruntfile.js. Bekijk de bronbestanden om te zien wat er in dit bestand staat, maar wat van bijzonder belang is, is de Grunt-taak zelf:
purifycss: target: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], dest: 'css / bootstrap-grunt.css'
De opties binnen het doelobject zouden u bekend moeten zijn uit onze vorige oefening en met deze parameters ingesteld, is ons bestand klaar.
Om Grunt uit te voeren, voer je in de terminal in:
grunt purifycss
En we zijn klaar! We hebben gekeken naar twee verschillende benaderingen voor het gebruik van PurifyCSS om onze stylesheets op te schonen. Vergeet niet: het heeft geen zin om browsers te laden in kilobytes aan stijlen die niet eens worden gebruikt, prestatie is belangrijk!
