Slik kombinerer du dupliserte medieforespørsler

I dag er det mange rammer som kan hjelpe deg med å raskt bygge opp responsive nettsteder. Bootstrap og Foundation, for eksempel, kommer med et sett med vanlige nettsidekomponenter, plugins, masse forhåndsdefinerte stilregler, samt CSS3-mediesøk for bygging av det responsive nettet.

En av ulempene ved å bruke disse rammene er imidlertid at mediaforespørslene er spredt som de er erklært og nestet i Mixins eller Funksjonene. Så du kan ende opp med flere dupliserte medieforespørsler gjennom kodene .

Ville det ikke vært bedre hvis vi kunne fjerne disse duplikatene og kombinere dem i en enkelt CSS-regel ? Hvis du er enig, sjekk ut dette tipset.

Starter

Denne oppgaven er avhengig av Grunt samt Grunt CLI, en Node.js-pakke for oppgaveautomatisering. Skriv inn kommandoen for å installere Grunt CLI (Command Line) i Terminal eller Kommandoprompt.

 npm installere -g grunt-cli 

Når du har kjørt de ovennevnte kommandoene, må du kontrollere at grunt kommandoen fungerer. Du kan teste det ved å skrive grunt --version versjon som skal vise det installerte Grunt versjonsnummeret, slik som det.

Hvis du imidlertid støter på en feil der kommandoen ikke er funnet eller gjenkjent, gå over til vårt forrige innlegg på hvordan du fikser det: Løsning Grunt "Kommando ikke funnet" feil i terminal [Quickfix]

Installer Grunt Plugin

Naviger til prosjektmappen, og kjør følgende kommando for å lage en fil med navnet Gruntfile.js som vil bli brukt til å spesifisere Grunt-funksjonene og registrere oppgavene .

 trykk Gruntfile.js 

Skriv inn disse to kommandoene nedenfor for å laste ned Grunt-modulen, som kreves for å kjøre oppgaven senere. Last ned også et Grunt-plugin kalt grunt-combine-media-queries combin grunt-combine-media-queries (cmq) for å kombinere matchende medieforespørsler.

 npm installere grunt - save-dev npm installere grunt-kombinere-media-spørringer - lag-dev 

Etter at prosessen er fullført, bør du finne en ekstra mappe som heter node_modules i prosjektkatalogen, som inneholder disse modulene.

Registrere og konfigurere oppgave

La oss åpne Gruntfile.js og legge inn følgende kode i den.

 module.exports = funksjon (grunt) {grunt.initConfig ({cmq: {options: {log: false}, your_target: {filer: {'output': ['build / *. css']}}}})); grunt.loadNpmTasks ( 'grunt-kombinerer-media-spørringer'); grunt.registerTask ('standard', 'cmq'); }; 

Denne koden ovenfor konfigurerer cmq oppgaven. Den inneholder to parametere, log og files :

log parameteren er en boolsk som du kan sette enten til true eller false ; Hvis den er satt til true, vil den opprette en loggfil som består av de behandlede mediene.

files parameteren angir målfilene og utdatamappen. Og gitt det ovennevnte kodeeksemplet vil det søke i alle CSS-filene i byggemappen og sende resultatet i utdatamappen. Du kan erstatte banen som per din egen prosjektkonfigurasjon.

Kjør oppgaven

På dette punktet har alt blitt konfigurert; Vi har installert Grunt CLI, Grunt-modulen, samt plugin-modulen for å kombinere medieforespørsler. Nå må vi bare utføre oppgaven.

Som et eksempel har jeg en CSS-fil som inneholder flere dupliserte medieforespørsler som du kan se nedenfor.

Åpne Terminal, sørg for at du fortsatt er "i" prosjektkatalogen. Deretter skriver du bare grunt, slik som det.

Vi er ferdige. Nedenfor er sammenligningen mellom kildefilen og utdatafilen.

Ytterligere referanse

• Komme i gang med GruntJS
• Grunt Kombiner mediefiler Repo

20 Tech Knockoffs som vil gi deg dumbfounded

Tenk på alle de populære maskinvaremerkene i teknologi akkurat nå. Epler og Sonys som har en distinkt ære for å bli betraktet som et luksusmerke. Alle vil ha en og alle som er noen ville kjøpe og flaute dem til sine jevnaldrende, skape en appell. Dessverre kan ikke alle ha råd til dem, og det er der knockoffs kommer til redning.Disse

(Tekniske og design tips)

Slik får du Goodreads-rangeringer via API

For bokelskere som har en smak for en bestemt sjanger, vil de trolig sjekke ut en venns anbefaling enn å følge en bestselgerliste. Det er derfor Amazonas Goodreads er et bokmerket nettsted for ivrige lesere. Det er et sted hvor du kan finne en omfattende database med bøker, anbefalinger og anmeldelser av andre bokelskere.Go

(Tekniske og design tips)