de Vinicius Gularte

Cum să-ți minimizezi CSS cu gulp

Cum sa ti minimizezi CSS cu gulp

În acest articol, voi arăta o modalitate simplă de a reduce automat fișierele CSS folosind gulp. ?

Pentru a începe – ce este gulp?

Gulp este un alergător de sarcini JavaScript care vă permite să automatizați sarcini precum …

  • Combinarea și reducerea bibliotecilor și a foilor de stil.
  • Reîmprospătarea browserului atunci când salvați un fișier.
  • Rularea rapidă a testelor unitare.
  • Rularea analizei codului.
  • Compilație Less / Sass to CSS.
  • Și mult mai mult!

Fluxul de lucru Gulp funcționează după cum urmează:

Putem crea sarcini pe care am vrea să le îndeplinim. În aceste sarcini încărcăm fișiere pe care dorim să gulp să funcționeze (modificând sau nu), apoi le returnăm într-un folder de returnare.

E simplu.

În acest mic tutorial, vă voi învăța cum să creați o sarcină pentru a minimiza toate fișierele CSS din folderul dvs. Apoi puneți-le pe cele într-un alt folder.

Să începem

Pentru acest tutorial, asigurați-vă că aveți cea mai recentă versiune a pachetului npm instalată pe computer. Dacă nu îl aveți, îl puteți descărca Aici.

Odată ce ați instalat npm, în directorul de bază al proiectului dvs. vom instala gulp folosind următoarele comenzi:

npm install gulp-cli -g

npm install gulp -D

Vom folosi, de asemenea, un plugin gulp pentru a minimiza CSS numit gulp-clean-css, deci instalați-l în tipul de proiect:

npm install gulp-clean-css --save-dev

Foarte bine, acum cu dependențele instalate în proiect, să creăm un fișier numit Gulpfile.js. Acest fișier va fi responsabil pentru sarcinile noastre.

1611932945 534 Cum sa ti minimizezi CSS cu gulp

Vom crea și două dosare în acest depozit. Unul va fi numit stiluri în care vor rămâne fișierele noastre de stil și altul numit dist unde vor merge fișierele minificate.

În cele din urmă, proiectul nostru va avea această structură:

1611932945 636 Cum sa ti minimizezi CSS cu gulp

În Gulpfile.js

La începutul fișierului, efectuăm apelurile pachetelor pe care le vom folosi.

Cu pachetele numite, vom crea sarcina responsabilă prin reducerea fișierelor noastre.

S-ar putea să vă întrebați – sunteți deja capabil să vă reduceți fișierele? Da, executând comanda gulp în terminal urmată de numele activității.

Dar executarea acestei comenzi tot timpul este un pic enervant, nu-i așa? Putem crea o metodă pentru observarea modificărilor aduse fișierelor din folderul de stiluri.

În acest fel, rularea comenzii gulp va aștepta modificări în fișierele selectate pentru a activa sarcina minify-css.

Concluzie

Acesta este doar un mod mic prin care gulp ne poate ajuta în dezvoltarea aplicațiilor noastre.

Puteți găsi codul pentru acest proiect în acest depozit pe GitHub.

Vă mulțumim că ați citit, vă rugăm să nu ezitați? și ajută-i pe alții să-l găsească.

Pe curând. ?

Referințe

gulp.js
Preferând codul în locul configurației, cele mai bune practici ale nodului și o suprafață API minimă – gulp face lucrurile simple ca …gulpjs.comgulp-clean-css
Minimizează css cu clean-css.www.npmjs.com