Utilizați Gulp și UnCSS pentru a reduce cadrul CSS Four Bucătării
Cadrele CSS sunt un mod frumos de a începe cu un proiect. Puteți spune după numele multor cadre populare: Bootstrap, Foundation și Skeleton doar pentru a numi câteva. Toate aceste nume evocă un punct de plecare - problema este că, dacă nu vă luați timp pentru a elimina piesele pe care nu le-ați folosit, veți expedia codul umflat utilizatorilor dvs.
Începeți cu tot, expediați ceea ce aveți nevoie
Când începeți un proiect, este util să aveți la dispoziție o gamă largă de instrumente. Indiferent de alegerea dvs., este destul de sigur că vor exista mai multe instrumente principale: un mecanism de aspect, utilitare pentru a forma formulare, butoane și alte CTA-uri, bare laterale și așa mai departe. Dacă le aveți la îndemână, dezvoltarea devine în mișcare și vă permite să vă concentrați asupra specificului proiectului dumneavoastră.
Cu toate acestea, odată ce a sosit momentul expedierii, lăsarea întregului cadru în loc înseamnă că livrați balonare inutilă fiecărui utilizator. Poate că ați folosit trei dintre cele șase butoane pe care le oferă sau ați decis să implementați propriul sistem de rețea la mijlocul proiectului. Îndepărtarea manuală a acestora este plictisitoare și puțin precară, deoarece este posibil să eliminați accidental ceva care este utilizat.
UnCSS pentru salvare
O modalitate obișnuită de a evita această problemă este de a utiliza UnCSS, un instrument care vă va compara HTML și CSS, eliminând biții de CSS pe care îi consideră neutilizați. Folosește PhantomJS sub capotă pentru a reda un set de pagini, inclusiv JavaScript. Odată ce pagina este redată în memorie, compară toți selectorii din pagina redată cu fișierele sursă CSS. De acolo poate genera un nou fișier CSS care conține selectoarele pe care le-ați folosit efectiv și nimic altceva!
Automatizarea UnCSS
UnCSS este o aplicație rapidă de utilizat. Îi oferiți o listă de fișiere CSS și o listă de adrese URL pe care ar trebui să le redea și face restul. Exemplul de sarcină gulp-uncss din kitul nostru de antrenament de performanță frontend reduce semnificativ o copie a Bootstrap. O puteți vedea în contextul unui Gulpfile mai mare pe GitHub, dar iată sarcina în sine: