Fjern unødvendig CSS med PurifyCSS og Grunt

I denne opplæringen vil jeg vise deg hvordan du bruker Grunt og PurifyCSS til å lage et superlitt stilark med minimal innsats. Vi installerer den, og lærer å kjøre den med og uten Grunt, for å gi oss mye mer effektive stiler.

Se på Screencast

 

PurifyCSS er et JavaScript-verktøy som analyserer dine markupfiler (HTML, PHP, eller til og med JavaScript) og kryssrefererer dem med det CSS du bruker. Eventuelle selektorer i CSS som ikke blir brukt, blir fjernet, og gir deg kun de stilene du faktisk trenger.

Installere

For å installere PurifyCSS kan du enten ta tak i repo direkte fra GitHub, eller installere den via npm (flere detaljer om hvordan det gjøres via denne opplæringen fra Kezz).

Installere via npm

Vår demonstrasjon

Filene vi skal bruke for å demonstrere PurifyCSS er et fullt Bootstrap-stilark og en index.html. Du kan ta dem fra kilde repo. Indeksen.html-filen er ganske enkel; Det er bare en helt-seksjon, med noen knapper, formelementer, og Bootstrap-rutenettet; Vi trenger absolutt ikke hele biblioteket med Bootstrap-stiler.

Det fulle Bootstrap-stilarket

Kjør PurifyCSS

For å kjøre PurifyCSS på dette stilarket, gå til kommandolinjeprompt, naviger til prosjektmappen og kjør en kommando med følgende:

• de purifycss beordre å sparke ting av
• kildeskiltarket som skal renses
• Målmarkupfiler, i vårt tilfelle index.html
• en valgfri parameter --min hvis vi vil at den resulterende CSS skal bli minifisert
• en valgfri parameter --ute Deretter kan vi spesifisere hvor vi vil at den resulterende filen skal lagres
• den valgfrie parameteren --info hvis vi ønsker at prosessen skal logges til terminalen
• og valgfri parameter --avvist som, når det er inkludert, logger alle selektorer som er blitt avvist fra kildeformatarket

Vår endelige kommando ser slik ut:

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

Resultat

Kilde stilarket har blitt trimmet av godt over 100Kb, god jobb!

Bruke PurifyCSS Med Grunt

For å automatisere prosessen enda mer kan vi bruke en oppgaveløper som Grunt. Når vi går tilbake til utgangspunktet, må vi legge til en package.json i prosjektet vårt. Kjører npm init fra vår mappe tar oss gjennom et package.json opprettelsesprosess, og utfører hovedsakelig en fil med følgende detaljer:

"navn": "purifycss", "versjon": "1.0.0", "beskrivelse": "En fil for testing Grunt PurifyCSS", "main": "index.js", "scripts" : "echo" Feil: ingen test angitt \ "&& avslutte 1", "forfatter": "Adi Purdila", "lisens": "ISC",

Så, hvis vi ikke allerede har det, må vi installere Grunt:

npm installere grunt - save

Med det gjort vil du se en mappe "node_modules" har blitt lagt til i prosjektet ditt.

Installer Grunt Plugin

Deretter må vi installere Grunt-pluginet for PurifyCSS.

npm installere grunt-purifycss - save

Lag Gruntfile

Nå må vi lage en fil som heter gruntfile.js. Ta en titt på kildefilene for å se hva som finnes i denne filen, men av særlig interesse er Grunt-oppgaven selv:

 purifycss: target: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], dest: 'css / bootstrap-grunt.css' 

Alternativene i målobjektet bør være kjent for deg fra vår tidligere øvelse, og med disse parameterne er vår fil klar.

For å kjøre Grunt, skriv inn i terminalen:

grunt purifycss

Konklusjon

Og vi er ferdige! Vi så på to forskjellige tilnærminger for å bruke PurifyCSS for å rense våre stylesheets opp. Ikke glem det: det er ikke noe poeng med å ha nettlesere i kilobytes stiler som ikke engang brukes, prestasjonsforhold!

Nyttige ressurser

• purifycss
• grynt-purifycss

Mer Grunt på Tuts+