Share
In questo tutorial ti mostrerò come usare Grunt e PurifyCSS per creare un foglio di stile superleggero con il minimo sforzo. Lo installeremo, quindi impareremo come eseguirlo con e senza Grunt, per darci stili molto più performanti.
PurifyCSS è uno strumento JavaScript che analizza i tuoi file di markup (HTML, PHP o anche JavaScript) quindi li rimandi a quelli che usi. Tutti i selettori del tuo CSS che non vengono utilizzati verranno rimossi, lasciando solo gli stili di cui hai effettivamente bisogno.
Per installare PurifyCSS puoi prendere il repository direttamente da GitHub, o installarlo via npm (maggiori dettagli su come farlo tramite questo tutorial di Kezz).
Installazione via npmI file che utilizzeremo per dimostrare PurifyCSS sono un foglio di stile Bootstrap completo e un index.html. Puoi prenderli dal repository di origine. Il file index.html è piuttosto semplice; c'è solo una sezione dell'eroe, con alcuni pulsanti, elementi del modulo e la griglia Bootstrap; non abbiamo certamente bisogno dell'intera libreria di stili Bootstrap.
Il foglio di stile Bootstrap completoPer eseguire PurifyCSS su questo foglio di stile, andare al prompt della riga di comando, accedere alla cartella del progetto ed eseguire un comando con quanto segue:
Accentsconagua
purifycss comando di calciare le cose--min se vogliamo che il CSS risultante sia minimizzato--su dopo di che possiamo specificare dove vogliamo che il file risultante venga salvato--Informazioni se vogliamo che il processo venga registrato nel terminale--respinto che, quando incluso, registra tutti i selettori che sono stati rifiutati dal foglio di stile sorgenteIl nostro comando finale si presenta così:
purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info --rejected
Il foglio di stile sorgente è stato tagliato di oltre 100Kb, ottimo lavoro!
Per automatizzare ulteriormente il nostro processo, possiamo utilizzare un task runner come Grunt. Tornando al nostro punto di partenza, dobbiamo aggiungere un pacchetto. Json al nostro progetto. L'esecuzione di npm init dalla nostra cartella ci porterà attraverso un processo di creazione di package.json, in sostanza, l'output di un file con i seguenti dettagli:
"name": "purifycss", "version": "1.0.0", "description": "Un file per testare Grunt PurifyCSS", "main": "index.js", "scripts": "test" : "echo \" Errore: nessun test specificato \ "&& exit 1", "author": "Adi Purdila", "license": "ISC",
Quindi, se non lo abbiamo già, dobbiamo installare Grunt:
npm install grunt --save
Fatto ciò vedrai una cartella "node_modules" che è stata aggiunta al tuo progetto.
Quindi è necessario installare il plugin Grunt per PurifyCSS.
npm install grunt-purifycss --save
Ora dobbiamo creare un file chiamato gruntfile.js. Dai un'occhiata ai file sorgente per vedere cosa è contenuto in questo file, ma di particolare interesse è l'attività Grunt stessa:
purifycss: target: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], destinazione: 'css / bootstrap-grunt.css'
Le opzioni all'interno dell'oggetto target dovrebbero essere familiari dal nostro esercizio precedente e, con questi parametri impostati, il nostro file è pronto.
Per eseguire Grunt, nel terminale inserisci:
grunt purifycss
E abbiamo finito! Abbiamo esaminato due diversi approcci per l'utilizzo di PurifyCSS per pulire i nostri fogli di stile. Non dimenticare: non ha senso caricare i browser in kilobyte di stili che non vengono neppure utilizzati, le prestazioni contano!
