Share
Questo è un tutorial completo sull'utilizzo di LESS con Chrome's DevTools. Se hai usato Sass con Chrome's DevTools, probabilmente avrai già familiarità con i concetti presentati qui.
Non molto tempo fa, il Chrome DevTools ha aggiunto una serie di caratteristiche simili a IDE (e continua a farlo), una delle quali è la capacità di comprendere il mapping tra un file compilato e il suo file sorgente corrispondente. Questo è reso possibile grazie a Mappe di origine.
Tutto quanto menzionato qui è disponibile in Chrome Canary.
Per prima cosa, installa la versione più recente (1.5.1 al momento in cui scrivo) di LESS su NPM (le mappe di origine sono arrivate in 1.5.0):
$ npm install -g less $ lessc -v lessc 1.5.1 (compilatore LESS) [JavaScript]
A questo punto, puoi eseguire il compilatore LESS nel tuo terminale usando il lessc comando.
Crea un nuovo file LESS. A scopo dimostrativo, sarà mantenuto breve e semplice.
@color: # 4D926F; #header color: @color;
Per trasformare il file LESS in un file CSS, è un semplice caso di esecuzione:
lessc header.less header.css
Ora abbiamo bisogno di un file di mappa sorgente. Crealo con il -fonte-map bandiera.
lessc --source-map = header.map header.less header.css
Usando il codice LESS mostrato sopra, l'esecuzione di questo comando produce un file di mappa sorgente con i seguenti contenuti:
"Versione": 3, "file": "header.css", "fonti": [ "header.less"], "nomi": [], "mappature": "AAEQ; EACP, caaa"
In un mondo senza Mappe di origine, DevTools visualizzerebbe gli stili originati dal CSS compilato. La numerazione delle linee non sarebbe utile a causa di una mancata corrispondenza tra CSS compilato e CSS sorgente. Con Mappe di origine, quando si ispeziona un nodo DOM sulla pagina, DevTools mostrerà automaticamente gli stili provenienti dal file sorgente LESS.
Visualizzazione di una pagina Web che fa riferimento a quanto menzionato in precedenza header.css è ora ispezionabile in un modo più significativo.
Mentre si tiene Comando (Controllo su Windows), fare clic su qualsiasi proprietà, valore o selettore per passare alla riga di codice nel file sorgente LESS corrispondente all'interno del file fonti pannello.
La visualizzazione del codice LESS in DevTools è sicuramente utile, ma l'integrazione di un flusso di lavoro di authoring può accelerare il ciclo di iterazione. Il passo successivo è dire a DevTools in che modo le risorse di una pagina web si associano ai file su un file system. Immettere: aree di lavoro.
Nota: gli spazi di lavoro sono adatti a molti progetti, non solo quelli che utilizzano i preprocessori CSS.
Potresti già avere familiarità con fonti pannello da una prospettiva di editing. L'idea generale è di avere un navigatore di file nella barra laterale dove ogni file è tipicamente un foglio di stile, uno script o una risorsa HTML che la pagina web ha caricato.
Facendo clic su una risorsa viene visualizzato il contenuto nel pannello principale. Si può notare la somiglianza che ha con il risorse pannello, tuttavia c'è almeno una differenza importante: il fonti il pannello contiene un editor dal vivo. Le modifiche apportate ai fogli di stile vengono applicate immediatamente alla pagina e le modifiche apportate agli script vengono reimmesse nel motore V8 e valutate immediatamente. Non solo funziona per i file ospitati in remoto, ma anche per quelli locali con l'ulteriore vantaggio di mantenere le modifiche in un file.
Nota: per utilizzare gli spazi di lavoro, i seguenti passaggi sono richiesti solo una volta per progetto.
Apri una pagina Web locale e aggiungi la sua cartella corrispondente sul tuo file system nell'area di lavoro tasto destro del mouse nel fonti barra laterale del pannello e selezione Aggiungi cartella all'area di lavoro.
Consenti a DevTools di accedere alla cartella che hai appena aggiunto.
La cartella appena aggiunta apparirà nella barra laterale di navigazione.
Pulsante destro del mouse su un file all'interno di una cartella di risorse di rete in fonti pannello (assicurati che abbia una mappatura ovvia su un file sul tuo file system) e seleziona Mappa su risorsa del file system.
Il primo suggerimento fornito da DevTools è quello corretto. Ha notato che il file sul mio file system (/ Utenti / ... /bootstrap.css) ha lo stesso nome di un file di risorse di rete (http: // localhost / ... /bootstrap.css). Verifica la mappatura selezionando la risorsa corretta.
DevTools ora comprende la mappatura tra risorse del filesystem e risorse di rete. Quando tu Comando / Ctrl + clic un selettore dal stili pannello e finisce nel fonti pannello, ti viene mostrato il tuo vero file sorgente LESS. È possibile modificare un file in fonti pannello e quelle modifiche rimarranno sul disco quando si Comando / controllo-S.
Siamo arrivati fin qui, quindi completiamo questo flusso di lavoro utilizzando un'attività di controllo di Grunt per controllare le modifiche apportate ai file LESS e quindi compilare automaticamente il nostro CSS e creare un file di mappa di origine corrispondente.
Con la configurazione degli spazi di lavoro, configura Grunt (o un altro strumento di tua scelta) per controllare le modifiche ai file sorgente MIN e compilare un nuovo file CSS (con una mappa sorgente). DevTools prenderà automaticamente questa modifica e applicherà qualsiasi nuovo stile alla pagina.
Nota: abilitare il CSS caricato automaticamente bandiera nel impostazioni pannello per utilizzare questo flusso di lavoro.
Ecco una descrizione dei passaggi automatizzati che si verificheranno:
Ecco un Gruntfile semplificato:
Accentsconagua
module.exports = function (grunt) 'use strict'; . Require ( 'matchdep') filterDev ( 'grunt - (CLI)!') Foreach (grunt.loadNpmTasks);. grunt.initConfig (less: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', files: 'less / bootstrap.css': 'less / bootstrap.less', guarda : tutti: file: ['less / ** / *. less'], attività: ['less'],); grunt.registerTask ('default', ['less', 'watch']); ; Nota: lo snippet di codice sopra proviene dal repository demo.
Dopo un installazione di npm, in esecuzione grugnito nel tuo terminale dovrebbe mostrare un'attività di controllo in esecuzione.
DevTools ha già accesso in scrittura alla tua cartella di sviluppo (tramite Workspaces). Comando / controllo-S i tuoi cambiamenti nel fonti pannello per fare in modo che DevTools sovrascriva il file sorgente LESS con la nuova modifica, Grunt compila un nuovo file CSS che DevTools inserisce e applica alla pagina.
grugnito-contri- * attività per la maggior parte di questi strumenti (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript) che si collegano bene con un flusso di lavoro del fegato.less.js # 1050-consentire la creazione di una mappa di origine.Ti piace quello che hai imparato? Ulteriori informazioni su Chrome DevTools!
