Share
În ultimul tutorial ați învățat cum să utilizați PostCSS pentru a vă ajuta să creați foile de stil mai compatibile cu browserul încrucișat, în special în ceea ce privește problemele care decurg din suportul pentru versiuni vechi ale IE.
În acest tutorial vom învăța cum să facem foile de stil mai eficiente și să le încărcăm mai repede, folosind PostCSS pentru a efectua diverse operații de minimizare și optimizare.
Veți învăța cum să:
Accentsconagua
@import , chiar dacă unele dintre foile dvs. de stil provin de la componentele Bower sau modulele npm, asigurându-vă că aveți nevoie de doar un singur http cereți să încărcați CSS-ul site-ului dvs..Să începem!
Primul lucru pe care trebuie să-l faceți este să configurați proiectul dvs. pentru a utiliza fie Gulp, fie Grunt, în funcție de preferințele dvs. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a atinge aceleași scopuri, așadar ar trebui să vă simțiți puțin mai ușor să lucrați cu.
Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
respectiv.
Dacă nu doriți să configurați manual proiectul de la zero, puteți să descărcați fișierele sursă atașate acestui tutorial și să extrageți proiectul Gulp sau Gruntul furnizat într-un dosar gol al proiectului. Apoi, cu un terminal sau un prompt de comandă indicat la dosarul de executare a comenzii npm install.
Pentru acest tutorial vom folosi două plugin-uri individuale, plus un pachet de plugin-uri. Instalați-le executând următoarea comandă în dosarul proiectului:
npm instalare postcss-import css-mqpacker cssnano -save-dev
Acum, plug-in-urile sunt instalate, să mergem mai departe și să le încărcăm în proiectul dvs..
Dacă utilizați Gulp, adăugați aceste variabile sub variabilele deja în fișier:
var atImport = necesită ('postcss-import'); var mqpacker = cer ('css-mqpacker'); var cssnano = cer ('cssnano');Acum adăugați fiecare dintre aceste nume de variabile noi în dvs. procesoare matrice:
var procesoare = [atImport, mqpacker, cssnano];
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
procesoare: [cere ('css-mqpacker') () cer ('cssnano') ()] ()Faceți un test rapid că totul funcționează prin rularea comenzii zgâria postcss verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Asta are toate plugin-urile instalate și încărcate, așa că hai să trecem la învățarea cum să le folosim pentru minificare și optimizare.
Mai degrabă decât încărcarea individuală a mai multor foi de stil, este mai eficient când este posibil să combinați foile de stil într-unul singur.
De exemplu, utilizarea Normalize.css este foarte frecventă, dar dacă o încărcați ca o foaie de stil independentă înaintea foii de stil principale, este nevoie de mai multe http solicită, prin urmare, încetinirea timpului de încărcare.
Cu toate acestea, dacă utilizați pluginul postcss-import de Maxime Thirouin, puteți combina Normalize.css în foaia de stil principală, prin utilizarea @import , oferindu-vă același CSS cu unul singur http cerere.
Să mergem mai departe și să facem acest lucru acum, să importăm și apoi să aliniem Normalize.css în foaia de stil a proiectului nostru. Începeți să descărcați "normalize.css" în folderul "src" al proiectului, de la https://necolas.github.io/normalize.css/
În partea de sus a fișierului "src / style.css" adăugați următoarea linie:
@import 'normalize.css';
După cum ați instalat deja postcss-import, asta e tot ce trebuie să faceți. Va vedea @import regula și introduce automat codul din fișierul normalize.css în foaia de stil.
Compilați fișierul dvs. și când vă uitați la fișierul "dest / style.css", ar trebui să vedeți întregul conținut al "normalize.css" din acesta:
/ *! normalize.css v3.0.2 | Licența MIT | git.io/normalize * / html font-family: sans-serif; ...
Puteți folosi același proces pentru a combina cât mai multe foi de stil separate. Doar locul @import linii în fișierul "src / style.css" ori de câte ori doriți să fie inserat codul înrădăcinat.
O caracteristică foarte utilă a acestui plugin este capacitatea sa de a descoperi în mod automat fișierele CSS situate în dosarul "bower_components" sau "node_modules".
De exemplu, mai degrabă decât descărcarea manuală a "normalize.css" așa cum am făcut mai sus, ați putea să rulați comanda bower instalați normalize.css --save în proiectul dvs. Aceasta va descărca automat ultimul fișier "normalize.css" în directorul "bower_components / normalize.css".
Notă: Dacă nu aveți instalarea Bower pe calculatorul dvs., aflați cum puteți afla aici.
În partea de sus a foii de stil, puteți utiliza în schimb această linie:
@import 'normalize.css / normalize.css';
Pluginul postcss-import va arăta în interiorul dosarului "bower_components" și va găsi "normalize.css", apoi continuați să îl introduceți la fel ca în exemplul anterior.
Același proces poate fi urmat pentru toate foile de stil care se află în dosarul "node_modules", ceea ce înseamnă că puteți utiliza fie Bower, fie npm pentru a gestiona descărcările, gestionarea dependenței și actualizări. Atunci când utilizați oricare dintre aceste servicii, acest plugin vă oferă un mijloc ușor de a combina fișiere CSS de la terțe părți în propriile foi de stil.
Includerea fișierelor CSS importate în acest mod nu este doar o metodă foarte eficientă de combinare a fișierelor din diferite surse, cum ar fi componentele Bower, de asemenea vă oferă posibilitatea de a organiza proiectul în mai multe foi de stiluri separate.
De exemplu, puteți crea un fișier pentru a controla aspectul dvs. și altul pentru a vă controla schema de culori. Dacă doriți să schimbați schema de culori, puteți urma un proces ca acesta:
Apoi, puteți repeta acest proces de câte ori doriți, făcându-l eficient să creați mai multe scheme de culori pentru același design.
Unele proiecte folosesc foi de stiluri separate pentru a oferi mai multe scheme de culori, cum ar fi aceasta, dar în procesul de a crea încetinirea din adăugat http solicitări. Cu această abordare întotdeauna ajungeți cu doar unul http cereți, în ciuda faptului că aveți o mulțime de libertate în ceea ce ar putea fi inclus în foaia de stil unică.
Citiți mai multe despre postcss-import la: https://github.com/postcss/postcss-import
Pluginul css-mqpacker al lui Kyo Nagashima va găsi interogări media potrivite în foaia dvs. de stil și le va combina într-una. Aceasta vă permite să vă organizați CSS cum vă rog în foile de stil de dezvoltare, repetând interogările media dacă aveți nevoie, fără a vă îngrijora de orice pierdere a eficienței în foaia dvs. de stil de producție.
Să formalizăm un exemplu al cazului de utilizare în cazul în care doriți să repetați interogările media, cum ar fi organizarea separată a aspectului de design și a imaginilor. Într-un proiect real, acest lucru ar putea însemna utilizarea unor fișiere complet separate, una pentru aspect și una vizuală, dar din simplitate vom face toate acestea în fișierul "src / style.css".
Vom începe cu un cod de aspect. Vom adăuga o .coloană clasa care va face două 50% coloanele de lățime se așează una lângă cealaltă, în mod implicit. Apoi vom folosi o interogare media pentru a le face să se suprapună una de alta la dimensiuni mai mici. Adăugați acest cod în foaia de stil:
/ * LAYOUT * / coloană (lățime: 50%; plutește la stânga; @media (max-width: 50rem) coloană lățime: 100%; float: nici unul;
Apoi vom adăuga câteva imagini vizuale pentru a seta un chenar gri în jurul coloanelor noastre. Prima coloană va avea clasa .column_one iar al doilea va avea clasa .column_two. Vom folosi aceeași interogare mediatică ca și cea pe care am făcut-o cu aspectul nostru pentru a schimba modul în care aplicăm o frontieră coloanelor noastre, în funcție de situația în care se află una lângă alta sau una deasupra celeilalte.
Adăugați și acest cod în foaia de stil:
/ * VISUALS * / Column_one, .column_two border: 0.0625rem solid #ccc; .column_two frontieră-stânga: 0; @media (max-width: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc; column_two border-top: 0;
Acum recompilați fișierul "src / style.css" și aruncați o privire la conținutul rezultat "dest / style.css".
După cum puteți vedea în codul de mai jos, pluginul css-mqpacker a identificat cele două interogări media corespunzătoare și le-a combinat într-unul:
/ * LAYOUT * / coloană (lățime: 50%; plutește la stânga; / * VIZUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two frontieră-stânga: 0; @media (max-width: 50rem) coloană lățime: 100%; float: nici unul; . column_one, .column_two border: 0.0625rem solid #ccc; column_two border-top: 0;
Notă: Codul de mai sus va fi miniat în fișierul "dest / style.css" datorită pluginului cssnano. Pentru a vedea codul neinminat, comentează temporar cssnano din Gulpfile sau Gruntfile procesoare mulțime.
Citiți mai multe despre css-mqpacker la https://github.com/hail2u/node-css-mqpacker
Pentru optimizarea CSS complexă și multilaterală, pachetul cssnano de Ben Briggs este o opțiune foarte puternică, dar una care este destul de mult plug and play. Acesta reunește aproximativ douăzeci și cinci de pluginuri și poate efectua un număr impresionant de diferite tipuri de optimizare.
Între o listă lungă de optimizări, aceasta poate:
calc () utilizareVom procesa un exemplu de cod în proiectul dvs. care va vedea toate optimizările de mai sus aplicate.
Adăugați acest cod în fișierul "src / style.css":
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Acesta este un exemplu de cssnano în acțiune * / font-weight: normal; margin-top: 1rem; marginea inferioară: 2rem; margin-stânga: 1.5rem; margin-dreapta: 2.5rem; font-weight: normal; padding: 1.75rem; lățime: calc (50rem - (2 * 1.75rem)); a text-decoration: none; font-weight: bold; p font-weight: bold;
Apoi recompilați fișierul.
Notă: ați putea dori să comenteze orice cod pe care l-ați avut deja, astfel încât să puteți vedea clar rezultatele.
În fișierul "dest / style.css" trebuie să vedeți acum codul optimizat:
.css_nano, .css_nano + p, [class * = css_nano] margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem a text-decoration: font-weight: 700
Aruncați o privire prin lista de optimizări menționate în lista de gloanțe de mai sus, apoi comparați exemplul de cod înainte și după compilare pentru a vedea cum are loc fiecare dintre aceste modificări:
font-weight: normal și font-weight: bold sunt convertite în greutatea fontului: 400 și font-weight: 700 font-weight: normal; a fost eliminat din .css_nano stilcalc () proprietatea a fost redusă la o valoare statică.css_nano, .css_nano + p, [clasa * = "css_nano"], .css_nano au fost minificate la .css_nano, .css_nano + p [class * = css_nano] margin-top: 1rem; marginea inferioară: 2rem; margin-stânga: 1.5rem; margin-dreapta: 2.5rem; au fost reduse la margine: 1rem 2.5rem 2rem 1.5rem; A și p stilurile au fost îmbinate pentru a împărtăși comunitatea lor greutatea fontului: 700; cadruPentru o listă completă a optimizărilor, cssnano oferă opțiuni de check-out: http://cssnano.co/optimisations/
Există mai multe pluginuri independente folosite de pachetul cssnano și este posibil să doriți să configurați setările sau să le dezactivați pe deplin unele dintre ele.
Pentru a dezactiva un plugin, treceți numele acestuia în opțiunile pentru cssnano cu setarea "false" aplicată. De exemplu, dacă nu doriți să optimizați greutățile fonturilor setați următoarele în Gulpfile / Gruntfile:
// În matricea procesoarelor Gulpfile cssnano (minifyFontWeight: false) // În matricea procesoarelor Gruntfile "cssnano" (minifyFontWeight: false)
Puteți urma aceeași abordare pentru a configura opțiunile pentru un plugin, oferind mai întâi numele pluginului, apoi setând opțiunile acestuia.
De exemplu, puteți seta precizia, (numărul de zecimale), care ar trebui să utilizeze pluginul calc. În mod implicit calc (100% / 2,76) te-ar da 36.23188%. Dar dacă ați dori să tăiați această precizie cu două zecimale, ați putea să o faceți așa:
// În matricea procesoarelor Gulpfile cssnano (calc: precizie: 2) // În matricea procesoarelor Gruntfile "cssnano" (calc: precision: 2)
Valoarea calului ar duce acum la 36.23%.
Pentru mai multe informații despre opțiunile cssnano vizitați: http://cssnano.co/options
Să facem o analiză a ceea ce ne-am referit mai sus:
În tutorialul următor vom începe să folosim PostCSS pentru preprocesare printr-un pachet de pluginuri excelent numit PreCSS. Acest pachet oferă acces imediat la sintaxa și funcționalitatea de tip Sass, cu variabile, mixuri, condiționări, extinde și mai mult.
Ne vedem în tutorialul următor!
