Share
În ultimul tutorial am trecut prin modul de configurare a unui proiect PostCSS cu Gulp. În acest tutorial vom atinge aceleași scopuri, folosind Grunt. Până la sfârșitul acestui tutorial veți ști cum să configurați un proiect PostCSS + Grunt cu orice selecție de pluginuri pe care o alegeți.
Notă: Dacă nu ați lucrat niciodată cu linii de comandă sau cu alergători de activitate, vă recomand că înainte de a începe acest tutorial verificați seria noastră gratuită: Linia de comandă pentru Web Design.
Pe măsură ce vom lucra cu Grunt, presupunem că aveți deja cerințele necesare pentru utilizarea lui:
Dacă nu sunteți sigur dacă ați instalat aceste programe, urmați tutorialul Linia de comandă pentru Web Design: Îmbunătățirea pachetelor 3rd Party.
Asigurați-vă că aveți echipamentul Grunt CLI instalat la nivel global și înțelegeți utilizarea sa de bază urmând Linia de comandă pentru Web Design: Automatizarea cu Grunt. În plus, urmați instrucțiunile din secțiunea "Instalarea Proiectului pentru Grunt" al tutorialului. Înainte de a vă deplasa, ar trebui să aveți un dosar de proiect cu:
În directorul de proiect adăugați două subfoldere, unul denumit "src" și altul numit "dest". Dosarul "src" va ține fișierele CSS neprelucrate, iar PostCSS va scrie fișierele CSS compilate în dosarul "dest".
Următorul lucru pe care va trebui să-l faceți este să instalați pluginul Grunt pentru PostCSS în proiectul dvs.: vom folosi zgomot-postcss pentru a gestiona compilația.
Într-un terminal / comanda de comandă indicată în dosarul proiectului, executați comanda:
npm instalare grunt-postcss - salvare-dev
În acest moment, structura proiectului ar trebui să arate astfel:
Deschideți Gruntfile pentru editare și începeți prin adăugarea shell-ului de bază al codului pe care toate Gruntfiles o cer:
modul.exports = funcție (grunt) ;
Înăuntru, vom folosi grunt.loadNpmTasks () funcția de a încărca în nostru groh-postcss plugin ca:
Accentsconagua
modul.exports = funcție (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Acum suntem gata să începem configurarea sarcinii Grunt pe care o vom folosi pentru a rula postcss. Mai întâi, adăugați grunt.initConfig () funcția deasupra liniei pe care am adăugat-o:
modul.exports = funcție (grunt) grunt.initConfig (); grunt.loadNpmTasks ( 'groh-postcss'); ;
Înăuntru, configurați un obiect numit postcss ca astfel:
modul.exports = funcția (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ( 'groh-postcss'); ;
În interiorul noului postcss obiect vom adăuga încă două obiecte imbricate, unul numit Opțiuni și unul numit dist:
modul.exports = funcție (grunt) grunt.initConfig (postcss: opțiuni: , dist: ); grunt.loadNpmTasks ( 'groh-postcss'); ;
Opțiuni obiect va deține configurația pentru PostCSS și dist obiect va conține informații despre locul în care trebuie citite fișierele noastre CSS din și scrisă la.
Continuați acum și creați un fișier CSS numit "style.css" în folderul "src" al proiectului. Adăugați un cod de testare la acesta, cum ar fi:
.test fundal: negru;
Actualizați acum dist obiect pentru a specifica "src / style.css" ca fișier sursă și "dest / style.css" ca fișier pe care dorim să-l generăm:
dist: src: 'src / style.css', dest: 'dest / style.css'
Apoi, în interiorul Opțiuni obiect, adăugați o matrice goală numită procesoare. Aici vom configura pluginurile PostCSS pentru utilizare mai târziu. Pentru moment, actualizați-l doar la:
opțiuni: procesoare: [],
De bază postcss sarcina este acum gata să meargă. Pentru a le testa, cu terminalul / comanda de comandă încă indicat în dosarul proiectului, executați comanda:
zgâria postcss
În terminalul dvs. ar trebui să vedeți acest mesaj:
Executarea funcției "postcss: dist" (postcss) >> 1 a fost creată o foaie de stil.
Și acum, în dosarul "Dest", ar trebui să găsiți un nou fișier "style.css", care conține același cod ca și fișierul "style.css" din dosarul "src".
Apoi vom adăuga o selecție de pluginuri și pachete PostCSS: Autoprefixer (adaugă prefixul furnizorului), cssnext (permite sintaxa viitoare) și pressss (se extinde cu funcționalitatea Sass).
Rulați următoarele comenzi pentru a instala fiecare în proiect:
npm instalare autoprefixer --save-dev npm instalare cssnext --save-dev npm instalare precss --save-dev
Notă: The cssnext și precss instalările pot dura mai mult timp, deoarece sunt pachete cu mai multe pluginuri.
Acum suntem gata să încărcăm fiecare dintre pluginuri prin procesoare matrice pe care am creat-o mai devreme. Actualizați matricea la următoarele:
procesoare: [necesită ('autoprefixer') (), cere ('cssnext') (), necesită ('precss')Să începem acum să adăugăm un cod de testare la fișierul sursă "style.css" și să verificăm dacă pluginurile noastre PostCSS nou setate funcționează conform așteptărilor.
Ștergeți ce aveți deja în fișier și adăugați în schimb acest CSS:
/ * Testarea autoprefixerului * / .autoprefixer display: flex; / * Testarea cssnext * / .cssnext fundal: culoare (alfa roșu (-10%)); / * Testarea precss * / .precss @if 3 < 5 background: green; @else background: blue;
Pornește zgâria postcss comanda din nou acum, iar fisierul rezultat in directorul "dest" trebuie sa aiba urmatorul continut:
/ * Testarea autoprefixerului * / .autoprefixer display: -webkit-box; afișare: -webkit-flex; afișare: -ms-flexbox; afișaj: flex; / * Testarea cssnext * / .cssnext fundal: rgba (255, 0, 0, 0.9); / * Testarea precss * / .precss fundal: verde
Veți vedea în .autoprefixer clasa, prefixele furnizorilor au fost adăugate de Autoprefixer. În .cssnext clasa, an RGBA () culoarea a fost generată de cssnext. Și în cele din urmă în .precss clasa, @if @else condițional a fost evaluată de PreCSS.
Rețineți că, dacă doriți să configurați opțiunile pentru un plugin, treceți opțiunile prin a doua pereche de paranteze după require () pentru pluginul respectiv. De exemplu, puteți specifica lista de browsere pe care doriți ca Autoprefixer să funcționeze, după cum urmează:
procesoare: [necesită ('autoprefixer') (browsere: ['ultima versiune']), cer ('cssnext'Frumusețea PostCSS este în capacitatea sa de a fi configurat cu orice combinație de pluginuri. Provocarea pe care aceasta o provoacă, totuși, este asigurarea faptului că alți oameni care doresc să lucreze la un proiect au aceeași configurație a pluginurilor PostCSS. Datorită npm, această provocare este gestionată prin sistemul său de gestionare a dependenței.
Deoarece utilizați --salvați-dev de fiecare dată când instalați un plugin în proiectul dvs., acesta va fi adăugat fișierului dvs. "project.json" ca dependență de program. Aceasta înseamnă că, dacă doriți să vă împărtășiți proiectul cu alții, aceștia pot rula comanda npm install de pe pachetul pe care îl împărțiți cu ei și aveți toate aceleași plugin-uri instalate automat.
Pentru a afla mai multe despre modul în care gestionarea dependenței funcționează cu NPM, verificați tutorialul Linia de comandă pentru Web Design: Taming Packages 3rd Party.
În rezumatul tuturor aspectelor de mai sus:
grunt.loadNpmTasks ( 'groh-postcss'); Opțiuni obiect care conține a procesoare mulțimedist obiect care specifică fișierele sursă și destinația pentru fișierele compilateDe acolo, puteți urma aceiași pași esențiali pentru a activa orice plugin PostCSS în proiectul dvs.:
npm install --salvați-dev preprocesoare matrice folosind funcția require ()necesită (“„) () .Consultați Gothub repo pentru fișiere de pornire și exemple completate.
Acum știi cum să folosești fie Gulp, fie Grunt să folosești PostCSS cu orice plugin pe care îl alegi. Următorul lucru de care aveți nevoie este să explorați ecosistemul plugin PostCSS și să găsiți pluginuri excelente care sunt perfecte pentru tipurile de proiecte pe care doriți să le creați.
Vom trece exact cum puteți face acest lucru în următorul tutorial; "Ghid de pornire rapidă: Explorarea pluginurilor".
