Come scaricare inutili CSS con Grunt

L'utilizzo di un framework, come Bootstrap e Foundation, è uno dei modi più rapidi per creare un sito Web reattivo. Questi framework hanno tutto il necessario, compresi i componenti Grid e User Interface per creare un sito web decente e funzionante.

Ma i framework mirano a soddisfare il maggior numero possibile di scenari web. Pertanto, includono un sacco di CSS predefiniti che non puoi utilizzare nel tuo sito web .

Non tutti gli stili sono utili per ogni scopo, ma averli ovunque aumenta le dimensioni del foglio di stile inutilmente, influenzando in ultima analisi il rendimento del tuo sito web. In questo articolo, ti mostreremo come scaricare quegli stili non necessari dai fogli di stile .

Iniziare

Per realizzare questa idea, abbiamo bisogno di Grunt CLI . Quindi assicurati di averlo installato sul tuo computer. Puoi riferirti a questi due precedenti articoli per saperne di più a riguardo:

• Come rimuovere i moduli inutili in jQuery
• Risolto errore "comando non trovato" Grunt nel terminale

Presumo che tu abbia una directory di progetto pronta, contenente HTML e CSS.

Come puoi vedere dallo screenshot seguente, ho due cartelle denominate build : questa opzione viene utilizzata per salvare i fogli di stile durante la fase di sviluppo; e css : questa sarà la cartella di destinazione dell'output finale del foglio di stile.

Quindi accedere alla directory del progetto tramite Terminal e digitare il seguente comando in modo consecutivo. Questi due comandi installano Grunt e grunt-uncss, il plugin Grunt di cui abbiamo bisogno per eseguire l'attività per rimuovere i CSS inutilizzati.

 npm install grunt --save-deve npm installa grunt-uncss --save-deve 

Configurazione di base

Crea un file chiamato Gruntfile.js nella directory del tuo progetto. Apri il file in un editor di codice e inserisci i seguenti codici.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}}); grunt.loadNpmTasks ( 'grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Il codice sopra è la configurazione del plugin di base; grunt-uncss prenderà i collegamenti del foglio di stile dal .html, individuerà i selettori CSS che non sono usati nel specificato. html e invia l'output a css/style.css .

Configurazione opzionale

grunt-uncss una serie di opzioni. Supponiamo che tu voglia ignorare determinati selettori, puoi includere il parametro ignore e specificare i selettori, in questo modo.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, opzioni: {ignora: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], }}}); grunt.loadNpmTasks ( 'grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

È inoltre possibile controllare grunt-css per elaborare solo per fogli di stile particolari al posto di quelli estratti dal file HTML con il parametro stylesheets .

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, opzioni: {ignora: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], stylesheets: [' build / style.css ']}}}); grunt.loadNpmTasks ( 'grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Configura il percorso di output secondo i tuoi requisiti di progetto.

Esegui UnCSS

Di seguito è il contenuto del mio file HTML.

 Scarica CSS 
1 °
2 °
3 °

... e questo il contenuto del mio foglio di stile.

 .wrapper {width: 960px; margine: 60px auto; } .page-title {color: red; } .first-div, .second-div, .third-div, .fourth-div {width: 100px; altezza: 100 px; } .first-div {background-color: # 000; colore: #fff; } .second-div {background-color: # 555; colore: #ccc; } .third-div {background-color: #ccc; colore: # f3f3f3; } .fourth-div {background-color: #aaa; colore: # 777; posizione: assoluta; } 

L'unica classe che non è presente nel file HTML è .fourth-div . La classe è stata rimossa dal foglio di stile. Avvia Terminal e digita grunt per eseguire l'attività configurata in Gruntfile.js.

Apri entrambi i file CSS. Vedrai che il selettore di classe .fourth-div è già stato rimosso poiché non è utilizzato nell'HTML.

Quando hai molti stili inutilizzati, questo suggerimento può aiutarti a ridurre in modo significativo le dimensioni del file del foglio di stile.

Vetrina di disegni di biglietti da visita Cool Hipster

Un biglietto da visita ha uno scopo semplice: porta il tuo nome, il nome della tua azienda o del tuo prodotto e i dettagli di contatto se il cliente desidera contattarti. Oggigiorno i biglietti da visita sono unici e straordinari, rispecchiando la personalità, le peculiarità ei talenti dei loro proprietari da quando i creativi sono stati coinvolti e hanno completamente cambiato il gioco.I

(Consigli tecnici e di design)

Facebook sul posto di lavoro: Boon or Bane?

Quanti di noi hanno avuto il tempo in cui giocavi segretamente certi giochi sul desktop del tuo posto di lavoro, solo per premere in modo riflessivo il tasto Alt + Tab al primo accenno del tuo capo? Se sei più lento di un secondo o due, il tuo capo ti prenderà e ti darà una buona lezione di etica sul lavoro.Be

(Consigli tecnici e di design)