Share
Dette er en komplett opplæring om bruk av MINDRE med Chrome DevTools. Hvis du har brukt Sass med Chrome DevTools, vil du sannsynligvis allerede være kjent med konseptene som er introdusert her.
Ikke for lenge siden har Chrome DevTools lagt til en rekke IDE-lignende funksjoner (og fortsetter å gjøre det), hvorav en er evnen til å forstå kartleggingen mellom en kompilert fil og tilhørende kildefil. Dette er gjort mulig takket være Source Maps.
Alt nevnt her er tilgjengelig i Chrome Canary.
Første ting er først, installer den siste versjonen (1.5.1 på tidspunktet for denne skrivingen) av LESS gjennom NPM (Source Maps ankom i 1.5.0):
$ npm installere -g mindre $ lessc -v lessc 1.5.1 (MINDRE kompilator) [JavaScript]
På dette punktet kan du kjøre LESTE kompilatoren i terminalen din ved hjelp av lessc kommando.
Opprett en ny MINDRE fil. For demonstrasjonsformål blir den kort og enkel.
@color: # 4D926F; #header color: @color;
Hvis du vil slå den MINDRE filen til en CSS-fil, er det et enkelt tilfelle av å kjøre:
lessc header.less header.css
Vi trenger nå en kilde kartfil. Lag det med -source-kartet flagg.
lessc --source-map = header.map header.less header.css
Ved å bruke LESS-koden vist ovenfor, kjører denne kommandoen en kilde kartfil med følgende innhold:
"Versjon" 3, "fil": "header.css", "kilder": [ "header.less"], "navn": [], "avbildninger": "AAEQ; EACP, CAAA"
I en verden uten Kildekart, DevTools ville vise stiler som stammer fra den sammensatte CSS. Linje nummerering ville ikke være nyttig på grunn av en feilmatch mellom kompilert CSS og kilde CSS. Med Kildekart, når du inspiserer en DOM-node på siden, vil DevTools automatisk vise stilene som kommer fra MINDRE kildefilen.
Vise en nettside som refererer til den tidligere nevnte header.css er nå inspiserbar på en mer meningsfylt måte.
Mens du holder Kommando (Styre på Windows), klikk på en hvilken som helst egenskap, verdi eller velg for å hoppe til linjen med kode i den tilsvarende LESS-kildefilen i kilder panel.
Vise LESS kode i DevTools er absolutt nyttig, men integrering av en forfatter-arbeidsflyt kan øke hastigheten på iterasjonssyklusen. Det neste trinnet er å fortelle DevTools hvordan ressursene på en nettside kartlegger filer på et filsystem. Skriv inn: Arbeidsområder.
Merk: Arbeidsområder passer for mange prosjekter, ikke bare de som bruker CSS preprosessorer.
Du er kanskje allerede kjent med kilder panel fra et redigeringsperspektiv. Den generelle ideen er at du har en filnavigator i sidefeltet hvor hver fil vanligvis er et stilark, et skript eller en HTML-ressurs som websiden har lastet inn.
Ved å klikke på en ressurs vises innholdet i hovedpanelet. Du kan merke likheten dette har med ressurser panel, men det er minst en stor forskjell: kilder panelet inneholder en live editor. Endringer du gjør til stilark blir umiddelbart brukt på siden, og endringer du gjør til skript, injiseres tilbake til V8-motoren og evalueres umiddelbart. Ikke bare fungerer dette for fjernstyrte filer, men også for lokale med den ekstra fordelen av å vedvare endringene i en fil.
Merk: For å gjøre bruk av arbeidsområder, er følgende trinn bare nødvendig én gang per prosjekt.
Åpne en lokal nettside og legg til tilhørende mappe på filsystemet ditt til arbeidsområdet ved høyreklikke i kilder panel sidebjelke og velge Legg til mappe i arbeidsområdet.
Tillat DevTools tilgang til mappen du nettopp har lagt til.
Din nylig lagt til mappe vil vises i sidelinjen navigasjonen.
Høyreklikk på en fil i en nettverksbasert mappe i kilder panelet (sørg for at det har en tydelig kartlegging til en fil på filsystemet) og velg Kart til File System Resource.
Det første forslaget fra DevTools er det riktige. Det har lagt merke til at filen på filsystemet mitt (/ Brukere / ... /bootstrap.css) har samme navn som en nettverksressursfil (http: // localhost / ... /bootstrap.css). Bekreft kartleggingen ved å velge riktig ressurs.
DevTools forstår nå kartlegging mellom filsystemressurser og nettverksressurser. Når du Kommando / Ctrl-klikk en velger fra Styles panel og slutt i kilder panelet, blir du nå vist din faktiske MINDRE kildefil. Du kan redigere en fil i kilder panelet og de endringene vil vedvare til disk når du Kommando / Ctrl-S.
Vi har kommet helt på denne måten, så la oss fullføre denne arbeidsflyten ved å bruke en Grunt-klokkeoppgave for å se etter endringer som er gjort i de MINDRE filene og deretter automatisk kompilere vårt CSS og lage en tilsvarende kildekartfil.
Med Workspaces satt opp, konfigurer Grunt (eller et annet verktøy etter eget valg) for å se etter endringer i LESS-kildefiler og kompilere en ny CSS-fil (med en kildekart). DevTools vil hente denne endringen automatisk og bruke noen nye stiler til siden.
Merk: Aktiver Auto-reload generert CSS flagg i innstillinger panel for å bruke denne arbeidsflyten.
Her er en oversikt over de automatiserte trinnene som vil oppstå:
Her er en forenklet Gruntfile:
Accentsconagua
module.exports = funksjon (grunt) 'bruk streng'; . Kreve ( 'matchdep') filterDev ( 'grunt - (CLI)!') Foreach (grunt.loadNpmTasks). grunt.initConfig (mindre: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', filer: 'mindre / bootstrap.css': 'mindre / bootstrap.less', se : alle: filer: ['mindre / ** / *. mindre'], oppgaver: ['mindre'],); grunt.registerTask ('standard', ['mindre', 'watch']); ; Merk: Kodestykket ovenfor kommer fra demo-depotet.
Etter en npm installasjon, løping grynte i terminalen din bør du vise en klokkeoppgave som kjører.
DevTools har allerede skrive tilgang til utviklingsmappen din (gjennom Workspaces). Kommando / Ctrl-S Dine endringer i kilder panel for å ha DevTools overskrive kilden MINDRE filen med den nye endringen, kompilerer Grunt en ny CSS-fil som DevTools trekker inn og gjelder for siden.
grynt-contrib- * Oppgaver for de fleste av disse verktøyene (Sass, Kompass, MINDRE, autoprefixr, UglifyJS2, CoffeeScript) som passer godt sammen med en arbeidsbelastnings arbeidsflyt.less.js # 1050-tillat å opprette et kildeskart.Liker du hva du har lært? Finn ut mer om Chrome DevTools!
