Share
În ultimul tutorial ne-am referit cum puteți începe cu PostCSS instant folosind CodePen sau Prepros. Aceste opțiuni sunt minunate, dar restrictive, deoarece nu puteți controla pluginurile disponibile pentru utilizare.
În acest tutorial vom trece prin modul în care puteți utiliza PostCSS cu task-ul Gulp, permițându-vă să vă decideți care sunt pluginurile pe care doriți să le utilizați și, prin urmare, să vă conectați într-adevăr la ecosistemul plugin.
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.
Având în vedere că vom lucra cu Gulp, vom presupune că aveți deja condițiile necesare pentru utilizarea sa:
Dacă nu sunteți sigur că ați instalat aceste programe, urmați tutorialul Linia de comandă pentru Web Design: Taming Packages 3rd Party, deoarece vă va ajuta să obțineți aceste premise.
Vă rugăm, de asemenea, să vă asigurați că înțelegeți elementele de bază ale utilizării Gulp urmând tutorialul Linia de comandă pentru Web Design: Automatizarea cu Gulp. În plus, urmați instrucțiunile din secțiunea "Instalarea Proiectului pentru Gulp" al tutorialului. Înainte de a vă deplasa, ar trebui să aveți un dosar de proiect cu:
În dosarul proiectului creați două subfoldere, unul numit "src" și unul denumit "dest". Dosarul "src" va ține fișierele CSS neprelucrate, în timp ce folderul "dest" va avea fișierele procesate PostCSS scrise în el.
Următorul lucru pe care trebuie să-l faceți este să instalați pluginul gulp-postcss în proiectul dvs. - vom folosi acest lucru pentru a prelua procesarea postcss.
Într-un terminal / comanda de comandă indicată în dosarul proiectului, executați comanda:
npm instalează -save-dev gulp-postcss
După finalizarea instalării, structura proiectului ar trebui să arate astfel:
Acum, deschideți Gulpfile pentru editarea și crearea variabilelor pentru a apela atât în modulele "gulp", cât și în "gulp-postcss" prin adăugarea următorului cod:
Accentsconagua
var gulp = necesită ("gulp"); var postcss = necesită ("gulp-postcss");Acum putem configura o sarcină pentru a citi un fișier CSS sursă și pentru a-l procesa prin PostCSS.
Adăugați următoarele:
gulp.task ('css', funcția () var procesoare = []; returnați gulp.src ('./ src / * .css') .pipe (postcss (processors)) .pipe (gulp.dest ('. / dest ')););Să aruncăm ce avem în codul de mai sus.
În prima linie am setat o sarcină de gulp numită css. Această sarcină execută o funcție, iar în interiorul acelei funcții am creat un matrice numită procesoare. Chiar acum matricea este goală, dar într-un moment o vom umple cu pluginurile PostCSS pe care dorim să le folosim.
După procesoare array am specificat fișierele pe care vrem să le vizăm pentru procesare: orice fișiere CSS din dosarul "src".
În prima dintre cele două linii utilizând pipe () , setăm PostCSS să se execute prin intermediul funcției postcss (). Ca argument prin această funcție, trecem pe noi procesoare array, care, ulterior, îi va spune lui PostCSS ce pluginuri vrem să folosim.
În cele din urmă, cu al doilea dintre cei doi pipe () funcții, avem codul procesat scris într-un nou fișier CSS în dosarul nostru "dest".
Mergeți mai departe și creați un nou fișier "style.css" în dosarul "src" și adăugați câteva CSS de testare, cum ar fi:
.test fundal: negru;
Acum, în terminalul / promptul de comandă, care a fost încă indicat în dosarul proiectului, executați comanda:
gulp css
Aceasta va executa sarcina pe care tocmai ați configurat-o și, ca rezultat, ar trebui să găsiți acum un nou fișier "style.css" în dosarul "dest".
Când deschideți acest nou fișier, veți vedea codul identic cu acesta din fișierul sursă. Codul nu sa schimbat deoarece nu am folosit încă niciun plugin PostCSS și cum veți ști de la un tutorial anterior, sunt plugin-urile care efectuează manipularea CSS reală.
Acum vom adăuga o selecție de pluginuri și pachete PostCSS: Autoprefixer (adaugă prefixe furnizorilor), cssnext (permite sintaxa viitoare) și pressss (se extinde cu funcționalitatea Sass).
Rulați următoarele comenzi pentru a instala fiecare plugin în proiectul dvs.:
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.
Apoi vom defini variabilele care se vor încărca în fiecare în proiectul nostru. Adăugați următorul cod sub cele două variabile existente în partea de sus a fișierului Gulp:
var autoprefixer = necesită ("autoprefixer"); var cssnext = cer ('cssnext'); var precss = necesită ("precss");Apoi vom adăuga aceste trei pluginuri la procesoare array în sarcina noastră de gulp. Actualizați matricea la următoarele:
var procesoare = [autoprefixer, cssnext, precss];
Cu cele trei plugin-uri adăugate la matricea procesoarelor noastre, PostCSS va ști că dorim să le aplicăm fiecărei surse CSS.
Suntem gata să adăugăm un cod de test în fișierul "src / style.css" și să verificăm dacă totul funcționează. Ș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 gulp css 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
Ca și cele de mai sus, ar trebui să vedeți că prefixele furnizorilor au fost adăugate la prima clasă de către Autoprefixer, an RGBA () culoarea a fost produsă de cssnext în a doua clasă și @if @else verificarea a fost evaluată de PreCSS în clasa a treia.
Notă: dacă doriți să configurați opțiunile pentru un plugin, adăugați o pereche de paranteze după numele acestuia în matricea preprocesoarelor și treceți opțiunile de acolo. De exemplu, puteți specifica lista de browsere pe care doriți ca Autoprefixer să funcționeze, după cum urmează:
var procesoare = [autoprefixer (browsere: ['ultima versiune 1']), cssnext, precss];
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.
Pentru a rezuma cele de mai sus:
procesoare mulțimepostcss () funcția, cu procesoare array a trecut ca argumentDe acolo, puteți urma aceiași pași esențiali pentru a activa orice plugin PostCSS în proiectul dvs.:
npm install --salvați-dev var autoprefixer = necesită ("autoprefixer"); preprocesoare mulțime.Consultați Gothub repo pentru fișiere de pornire și exemple completate.
În următorul tutorial vom discuta cum să configurați un proiect PostCSS în celălalt dintre cei doi mari alergători: Grunt. Ne vedem acolo!
