Ta bort onödig CSS med PurifyCSS och Grunt

I denna handledning visar jag dig hur du använder Grunt och PurifyCSS för att skapa ett superlättat stilark med minimal ansträngning. Vi installerar det och lär dig hur du kör det med och utan Grunt för att ge oss mycket mer prestanda.

Titta på Screencast

 

PurifyCSS är ett JavaScript-verktyg som analyserar dina markupfiler (HTML, PHP, eller till och med JavaScript) och refererar dem sedan till vad som helst CSS du använder. Alla väljare i din CSS som inte används kommer att tas bort, vilket ger dig bara de stilar du faktiskt behöver.

Installera

För att installera PurifyCSS kan du antingen ta repet direkt från GitHub eller installera det via npm (mer information om hur det görs via den här handledningen från Kezz).

Installera via npm

Vår demo

Filerna som vi ska använda för att visa PurifyCSS är ett komplett Bootstrap-stilark och ett index.html. Du kan ta tag i dem från källrepetionen. Index.html-filen är ganska enkel; Det finns bara en hjältesektion med några knappar, formelement och Bootstrap-nätet. Vi behöver verkligen inte hela biblioteket med Bootstrap-stilar.

Det fullständiga Bootstrap-stilarket

Kör PurifyCSS

För att köra PurifyCSS i det här formatet, gå till kommandoraden, navigera till projektmappen och kör ett kommando med följande:

• de purifycss beordra att sparka bort saker
• källkalkylbladet som ska renas
• Målmarkupfilerna, i vårt fall index.html
• en valfri parameter --min om vi vill att den resulterande CSS ska minimeras
• en valfri parameter --ut varefter vi kan ange var vi vill att den resulterande filen ska sparas
• den valfria parametern --info om vi skulle vilja att processen loggas till terminalen
• och den valfria parametern --avvisade som, när den ingår, loggar alla väljare som har blivit avvisade från källformatarket

Vårt sista kommando ser ut så här:

purifycss css / bootstrap-full.css index.html --min - ut css / bootstrap-purify.css --info --rejected

Resultat

Källformatarket har trimmats med drygt 100kb, bra jobb!

Använda PurifyCSS Med Grunt

För att automatisera vår process ännu mer kan vi använda en arbetslöpare som Grunt. Gå tillbaka till vår utgångspunkt, vi måste lägga till ett paket.json till vårt projekt. Att köra npm init från vår mapp tar oss genom en package.json skapande process, som i huvudsak utmatar en fil med följande detaljer:

"name": "purifycss", "version": "1.0.0", "description": "En fil för testning Grunt PurifyCSS", "main": "index.js", "scripts" : "echo \" Fel: inget test specificerat \ "&& avsluta 1", "författare": "Adi Purdila", "licens": "ISC"

Då, om vi inte redan har det, måste vi installera Grunt:

npm installera grunt -save

Med det gjort kommer du att se en mapp "node_modules" har lagts till i ditt projekt.

Installera Grunt Plugin

Nästa måste vi installera Grunt-plugin för PurifyCSS.

npm installera grunt-purifycss -save

Skapa Gruntfile

Nu behöver vi skapa en fil som heter gruntfile.js. Ta en titt på källfilerna för att se vad som finns i den här filen, men av särskilt intresse är Grunt-uppgiften själv:

 rensa 

Alternativen inom målobjektet borde vara bekanta med dig från vår tidigare övning, och med dessa parametrar är vår fil klar.

För att köra Grunt, skriv in terminalen:

grunt purifycss

Slutsats

Och vi är klara! Vi tittade på två olika sätt att använda PurifyCSS för att städa våra stylesheets upp. Glöm inte: det finns ingen mening att ha webbläsare i kilobytes stilar som inte ens används, prestationsfrågor!

Användbara resurser

• purifycss
• grunt-purifycss

Mer Grunt på Tuts+