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.

10 app di collaborazione per i project manager

Le possibilità sono molte del tuo lavoro e i progetti sono fatti online. Tuttavia, tu e il tuo capo potreste avere difficoltà a dare priorità alle attività che sono più importanti di altre . Per questo motivo, si presenta la necessità per i manager di utilizzare più applicazioni di collaborazione online. Inolt

(Consigli tecnici e di design)

100 applicazioni portatili utili e gratuite che dovresti conoscere

Le app portatili sono il software che non richiede installazione diversa dalle solite app eseguibili, ma richiama la cronologia e le opzioni di configurazione a differenza delle app con zip. In questo post presentiamo le 100 migliori applicazioni portatili utili che è possibile trasportare in una pen drive o nella memoria del telefono o nella scheda SD.

(Consigli tecnici e di design)