Cum se utilizează hărțile sursă pentru o depanare mai bună a preprocesorului

Proprocesoarele CSS au devenit un instrument indispensabil pentru majoritatea dezvoltatorilor din front-end. Cu toate acestea, în ciuda numeroaselor avantaje pe care le oferă, folosind instrumente precum LESS, Stylus sau Sass prezintă, de asemenea, noi probleme, una despre care vom vorbi (și vom rezolva) în acest tutorial.

Problema

Dacă nu lucrați la un mic site web cu foarte puține pagini, este o practică comună cea mai bună să împărțiți foaia de stil în mai multe module sau amprente parțiale. De exemplu, am putea separa stilurile de navigație în propriul lor parțial denumit navbar.scss (preprocesorul fiind Sass). Apoi vom importa acest lucru, împreună cu alte partiale, într-o singură foaie de stil primară folosind @import după care vor fi compilate într-un singur fișier CSS. Aici începe problema.

Browserele parsează CSS-ul compilat, nu fișierele de lucru, ceea ce face ca depanarea stilului să devină mai dificilă. Procesul de depanare poate fi cu adevărat greoaie dacă gestionați un proiect la scară largă cu zeci de foi de stil pentru a le gestiona. Identificarea stilurilor compilate provenite poate fi aproape imposibilă.

După cum puteți vedea mai jos, inspectorul web se referă la fișierul .css, spunându-ne că stilul pentru corp este declarat on-line 270. Asta nu ne ajută prea mult, pentru că în fișierele noastre de lucru este declarat de fapt în schele 27.

Soluția hărții sursă

Folosind un harta sursă va lega aceste limbi în stil comunal. Hărțile sursă sunt fișiere generate separat, care permit browserelor să urmărească CSS compilat înapoi la sursa originală. În realitate, hărțile sursă pot fi utilizate în multe medii de codare:

"Sursa hărților oferă o modalitate lingvistică-agnostică de cartografiere a codului de producție la codul original care a fost scris." - Sayanee Basu

Pentru scopurile noastre, hărțile sursă fac debuggingul de stil cu un preprocesor CSS la fel de familiar ca și lucrul cu CSS simplu. După cum puteți vedea mai jos, inspectorul web afișează acum referința stilului la sursa originală, datorită hărții sursă.

Generarea unei hărți sursă

Pentru a începe, trebuie mai întâi să generăm un fișier hartă sursă (.map) împreună cu CSS generat. Acest fișier .map conține cod format JSON pentru a servi drept referință între fișierul compilat și sursa originală. Sass a adăugat suportul pentru generarea hărților sursă în versiunea 3.3, LESS a adăugat-o în versiunea 1.5.0 și puteți găsi, de asemenea, informații despre suportul Stylus al hărților sursă în documentație.

Toată lumea are propria lor preferință atunci când vine vorba de ridicarea instrumentelor care se încadrează în fluxul lor de lucru. În afară de interfața de linie de comandă nativă (CLI) pe care fiecare preprocesor CSS le oferă, avem și câteva alte opțiuni precum Grunt și Gulp, chiar și aplicații precum Codekit.

Utilizarea CLI

Toate preprocesoarele principale au capacitatea de a crea o hartă sursă prin CLI. 

MAI PUȚIN

Cu mai puțin, puteți include --Sursa hartă semnalizați astfel:

stiluri minime> stiles.css --source-map = styles.css.map

Acest exemplu compilează styles.less în styles.css, generând în același timp fișierul hărții sursă cu numele setat la "styles.css.map".

Sass

Utilizatorii Sass pot folosi --sourcemap (fără cratimă) să facă același lucru, de exemplu:

sass stiles.scss: styles.css --sourcemap

Spre deosebire de LESS, --sourcemap în Sass are nevoie de noi pentru a specifica numele fișierului. Sass va numi fișierul cu același nume ca și foaia de stil compilată în mod implicit. Deci, având în vedere exemplul de mai sus, numele hărții sursă ar fi în continuare "styles.css.map".

Stylus

La fel ca Sass, Stylus cere numai --sourcemap pavilionul sau, în plus, oferă stenograma -m:

stylus -m stiles.styl

Din nou, acest lucru ne oferă "styles.css.map".

Utilizând un Runner de activități

Dacă preferați să utilizați un alergator de sarcină ca Grunt, utilizați mormăit-contrib-mai puțin, mormăit-contrib-Sass sau mormăit-contrib-stylus pentru a compila CSS, includeți apoi opțiunea de a genera harta sursă. Exemplul de mai jos face în mod eficient același lucru ca în exemplul anterior; acesta generează o hartă sursă numită "styles.css.map" din fișierul nostru stiles.less.

module.exports = funcție (grunt) grunt.initConfig (mai puțin: opțiuni: sourceMap: true, sourceMapFilename: styles.css.map, fișiere: 'styles.css': 'styles.less' ); grunt.loadNpmTasks ( 'groh-contrib mai puțin'); grunt.registerTask ("implicit", ['mai puțin']); ;

Utilizatorii Sass pot folosi grunt-contrib-sass și pot seta opțiunea în același mod, de exemplu:

modul.exports = funcție (grunt) grunt.initConfig (sass: opțiuni: sourcemap: 'auto', fișiere: 'styles.css': 'styles.scss'); grunt.loadNpmTasks ( 'groh-contrib-sass'); grunt.registerTask ("implicit", ['sass']); ;

Folosind o interfață de aplicație

Cea mai ușoară cale, mai ales dacă nu sunteți atât de confortabilă cu linia de comandă, este prin utilizarea unei interfețe grafice cum ar fi Codekit, Prepros sau Koala. Cu aplicația, crearea unei hărți sursă este la fel de simplă ca un singur clic.

Opțiunea Mapare sursă în Codekit.

Odată ce harta sursă este creată cu succes, veți găsi un fișier nou .Hartă precum și referința indicând fișierul hărții sursă în partea de jos a foii de stil compilate. Acest comentariu de referință va arăta, de obicei, un pic ca:

/ * # sursăMappingURL = style.css.map * /

Susținerea hărții sursă în browsere

Toate cele mai recente browsere acceptă hărțile sursă. Safari se va activa odată ce fișierul hărții sursă este disponibil, fără a fi nevoie de configurare. În celelalte browsere, cum ar fi Firefox, Chrome și Opera, hărțile sursă pot fi dezactivate în mod prestabilit, caz în care va trebui să comutați setările.

Firefox

În Firefox, inspecția hărții sursă este disponibilă numai prin intermediul DevTools încorporate în Firefox. Firebug - add-on-ul de depanare popular pentru Firefox - încă nu a adăugat această caracteristică, din păcate. Prin urmare, lansați Firefox DevTools și activați hărțile sursă făcând clic dreapta pe orice referință de stil și selectând "Afișați sursele originale" din meniul contextual.

Crom

În Chrome (precum și pe Opera 12 și în sus), faceți clic pe pictograma "unelte" din inspectorul web și asigurați-vă că Activați hărțile sursă CSS este bifat.

Odată ce fișierul hartă sursă este creat și funcția din browser este activată, ar trebui să găsiți inspectorul indicând sursa originală. În acest caz, puteți vedea inspectorul referindu-se direct la schele.

Înfășurarea în sus

Acum, cu puterea hărților sursă la sfaturile degetului dvs., veți putea să debugați stiluri compilate la fel cum au făcut designerii web cu CSS de ani de zile. Deci, nu uitați să generați o hartă sursă pentru următoarea foaie de stil compilate!