Eliminați CSS inutil cu PurifyCSS și Grunt

În acest tutorial vă voi arăta cum să utilizați Grunt și PurifyCSS pentru a crea o foaie de stil super-ușoară cu un efort minim. O vom instala, apoi vom învăța cum să o executăm cu și fără Grunt, pentru a ne oferi stiluri mult mai performante.

Urmăriți ecranul

 

PurifyCSS este un instrument JavaScript care vă analizează fișierele de marcare (HTML, PHP sau chiar JavaScript), apoi le trimite pe acestea cu ajutorul oricărui CSS pe care îl utilizați. Orice selector din CSS care nu este folosit va fi eliminat, lăsându-vă doar cu stilurile de care aveți nevoie.

Instalare

Pentru a instala PurifyCSS, puteți să luați repo direct de la GitHub sau să îl instalați prin intermediul npm (mai multe detalii despre cum se face prin acest tutorial de la Kezz).

Instalarea prin npm

Demo-ul nostru

Fișierele pe care le vom folosi pentru a demonstra PurifyCSS sunt o foaie de stil Bootstrap completă și un index.html. Le puteți lua din sursa repo. Fișierul index.html este destul de simplu; există doar o secțiune de erou, cu unele butoane, elemente de formă și grila Bootstrap; cu siguranță nu avem nevoie de întreaga bibliotecă de stiluri Bootstrap.

Fișa de stil Bootstrap completă

Rulați PurifyCSS

Pentru a rula PurifyCSS pe această foaie de stil, mergeți la promptul liniei de comandă, navigați la dosarul proiectului și executați o comandă cu următoarele:

• purifycss comanda pentru a da naștere lucrurilor
• foaia de stil sursă care urmează să fie purificată
• fișierele de marcare țintă, în cazul nostru index.html
• un parametru opțional --min dacă vrem ca miniaturile CSS să fie minime
• un parametru opțional --afară după care putem specifica unde dorim ca fișierul rezultat să fie salvat
• parametrul opțional --info dacă dorim ca procesul să fie înregistrat la terminal
• și parametrul opțional --respins care, când este inclus, înregistrează toți selectorii care au fost respinși din foaia de stil sursă

Comanda noastră finală arată astfel:

purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info - refuzat

Rezultat

Foaia de stiluri sursă a fost tăiată cu mult peste 100Kb, o treabă bună!

Utilizarea PurifyCSS cu Grunt

Pentru a ne automatiza procesul, putem folosi un alergator de sarcini ca Grunt. Revenind la punctul de plecare, trebuie să adăugăm un pachet.json la proiectul nostru. Rularea npm init din folderul nostru ne va duce printr-un proces de creare package.json, în esență, ieșind un fișier cu următoarele detalii:

name: "purifycss", "version": "1.0.0", "descriere": " : "echo \" Eroare: nici un test specificat \ "&& ieșire 1", "autor": "Adi Purdila", "license": "ISC"

Apoi, dacă nu o avem deja, trebuie să instalăm Grunt:

npm instalează grunt - salvează

Odată ce ați terminat, veți vedea că în proiectul dvs. a fost adăugat un dosar "node_modules".

Instalați pluginul Grunt

Apoi trebuie să instalați pluginul Grunt pentru PurifyCSS.

npm instalează grunt-purifycss - salvează

Creați Gruntfile

Acum trebuie să creăm un fișier numit gruntfile.js. Uitați-vă la fișierele sursă pentru a vedea ce conține fișierul, dar interesul special este sarcina Grunt în sine:

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

Opțiunile din obiectul țintă ar trebui să vă fie cunoscute din exercițiul nostru anterioară și, cu setarea acestor parametri, fișierul nostru este gata.

Pentru a rula Grunt, în terminal introduceți:

grunt purifycss

Concluzie

Și am terminat! Am analizat două abordări diferite pentru utilizarea PurifyCSS pentru a curăța foile de stil. Nu uitați: nu are rost să încărcați browserele în kilobyte de stiluri care nu sunt folosite nici măcar, problemele de performanță!

Resurse utile

• purifycss
• groh-purifycss

Mai mult Grunt pe Tuts+