Slik laster du unødvendig CSS med Grunt

Bruke et rammeverk, som Bootstrap og Foundation, er en av de raskeste måtene å bygge en responsiv nettside på. Disse rammene har alle de tingene som trengs, inkludert grid- og brukergrensesnittkomponentene for å bygge et anstendig, fungerende nettsted.

Men rammene tar sikte på å imøtekomme så mange webscenarier som mulig. Dermed inkluderer de masse forhåndsdefinert CSS som du kanskje ikke bruker på nettstedet ditt også.

Ikke alle stiler er nyttige for alle formål, men å ha dem rundt øker stilarkstørrelsen din unødvendig, noe som i siste instans påvirker nettstedet ditt. I denne artikkelen skal vi vise deg hvordan du laster ut de unødvendige stilene fra stilarkene .

Starter

For å oppnå denne ideen trenger vi Grunt CLI . Så sørg for at du har den installert på datamaskinen. Du kan referere til disse to tidligere artiklene for å vite mer om det:

• Slik fjerner du unødvendige moduler i jQuery
• Løsning Grunt "Command Not Found" Feil I Terminal

Jeg antar at du har en prosjektkatalog klar, som inneholder HTML og CSS.

Som du kan se fra følgende skjermdump, har jeg to mapper som heter build - dette brukes til å lagre stilarkene gjennom utviklingsstadiet; og css - dette vil være destinasjonsmappen for sluttsignalet for stilarket.

Deretter navigerer du til prosjektkatalogen gjennom Terminal og skriver følgende kommando etter hverandre. Disse to kommandoene installerer Grunt og Grunt-uncss, Grunt-pluginet som vi må løse oppgaven for å fjerne ubrukt CSS.

 npm installere grunt - save-deve npm installere grunt-uncss - save-deve 

Grunnleggende konfigurasjon

Opprett en fil med navnet Gruntfile.js i prosjektkatalogen. Åpne filen i en kodeditor, og legg inn følgende koder i den.

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

Koden ovenfor er den grunnleggende plugin-konfigurasjonen; grunt-uncss vil ta tak i grunt-uncss fra .html, finn CSS grunt-uncss som ikke er brukt i den angitte. html, og send utdataene til css/style.css .

Valgfri konfigurasjon

grunt-uncss kommer med en rekke alternativer. Si at du vil at den skal ignorere bestemte selektorer, du kan inkludere ignore og spesifisere selektorer, slik som det.

 modul.exports = funksjon (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, alternativer: {ignorere: ['#id -for-ignorer ', ' .auto-generert klasse ', ' .ignore-this-class '], }}}); grunt.loadNpmTasks ( 'grov-uncss'); grunt.registerTask ('standard', 'uncss'); } 

Du kan også kontrollere grunt-css å behandle bare for bestemte stilark i stedet for de som er trukket ut fra HTML-filen med stylesheets parameteren.

 modul.exports = funksjon (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, alternativer: {ignorere: ['#id -for-ignorer ', ' .auto-generert klasse ', ' .ignore-this-class '], stilark: [' build / style.css ']}}}); grunt.loadNpmTasks ( 'grov-uncss'); grunt.registerTask ('standard', 'uncss'); } 

Konfigurer utgangsstien som per prosjektkrav.

Kjør UnCSS

Nedenfor er innholdet i HTML-filen min.

 Løs CSS 
første
andre
tredje

... og dette innholdet i stilarket mitt.

 .wrapper {width: 960px; margin: 60px auto; } .page-title {color: red; } .first-div, .second-div, .third-div, .fourth-div {width: 100px; høyde: 100px; } .first-div {bakgrunnsfarge: # 000; farge: #fff; } .sekund-div {bakgrunnsfarge: # 555; farge: #ccc; } .third-div {bakgrunnsfarge: #ccc; farge: # f3f3f3; } .fourth-div {bakgrunnsfarge: #aaa; farge: # 777; posisjon: absolutt; } 

Den eneste klassen som ikke er til stede i HTML-filen, er .fourth-div . Klassen er fjernet fra stilarket. Launch Terminal, og skriv grunt å kjøre den konfigurerte oppgaven i Gruntfile.js.

Åpne begge CSS-filene. Du vil se at .fourth-div klassen allerede er fjernet som den ikke brukes i HTML-en.

Når du har masse ubrukte stiler, kan dette tipset hjelpe deg med å redusere stilarkets filstørrelse betydelig.

Vert ditt statiske nettsted i Dropbox med pannekake

Dropbox er den ledende plattformen for å lagre, sikkerhetskopiere og dele filer gjennom skylagring. Du kan slippe filene dine i Dropbox-mappen, og den blir synkronisert i minutter hvis du har delt den med andre. Men, bortsett fra fildeling, visste du at du også kan være vert for et nettsted i Dropbox?Ho

(Tekniske og design tips)

20 Valentine-tema dekorasjon ideer for romantikere

Så du planlegger en spesiell dato for Valentinsdag og ønsker å erklære din kjærlighet til din bedre halvdel. Bare gjør ikke feilen med å glemme de festlige dekorasjonene som kan gjøre dette til en utrolig uforglemmelig opplevelse.Når det kommer til innredning, er det mer enn bare å sprute rødt rundt, eller slå alt hjerteformet. Det er man

(Tekniske og design tips)