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.

Google Maps vil snart la deg dele realtidsstedet

Å holde oversikt over vennens plassering og forventet ankomsttid er en funksjon som har vært tilgjengelig på visse navigasjonsapper som Waze. Nå kommer disse funksjonene også til Google Maps-appen i nær fremtid.Når funksjonen går live, vil Google Maps-brukere se et alternativ for "Share Location" i appens sidemeny. Ved å

(Tekniske og design tips)

20 gratis verktøy for å lage umiddelbare fakturaer enkelt

Som småbedriftseier eller freelancer vet du betydningen av fakturering. Fakturaer sendes for å varsle kundene dine om produkter og tjenester du har levert, slik at du kan få betalt for arbeidet ditt. Som regel angir fakturaer mengden produkter eller tjenester du har levert, hvor mye det koster per enhet og totalprisen.Fa

(Tekniske og design tips)