no.hideout-lastation.com
Paradis For Designere Og Utviklere


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.

 CSS Ulastet 

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.

Hvordan dele sted med venner ved hjelp av Facebook Messenger

Hvordan dele sted med venner ved hjelp av Facebook Messenger

De av dere som ofte planlegger møter med Facebook-vennene dine, vil være glade for å vite at sammen med andre interessante funksjoner, vil Facebook Messenger-appen nå gi deg mulighet til å dele posisjonen din med vennene dine.Hvis du antar at du har den nyeste versjonen av Messenger installert på enheten din, kan du se et alternativ for plassering som er tilgjengelig i appens Mer- faneblad. Når

(Tekniske og design tips)

20 Lekkert utformede mat og drikke menyer

20 Lekkert utformede mat og drikke menyer

Menyene er som visittkortet til en kafé, restaurant eller bistro. Bortsett fra atmosfæren, gir menyen slags varig inntrykk som parkerer seg selv i våre sensoriske kjerner og bestemmer vårt valg av mat i dager, måneder eller år framover. Menyen gjenspeiler også den unike personligheten på stedet, kjøkkenet det serverer og stemningen det vil at kundene skal ta tilbake med dem når de forlater.Deretter

(Tekniske og design tips)