Kā samazināt savu CSS ar rāvienu

Šajā rakstā es parādīšu vienkāršu veidu, kā automātiski samazināt jūsu CSS failus, izmantojot gulp. ?

Lai sāktu - kas ir gulp?

Gulp ir JavaScript uzdevumu skrējējs, kas ļauj automatizēt tādus uzdevumus kā…

  • Bibliotēku un stilu lapu apvienošana un samazināšana.
  • Pārlūkprogrammas atsvaidzināšana, saglabājot failu.
  • Ātri veicami vienību testi.
  • Darbojas koda analīze.
  • Mazāk / Sass uz CSS kompilāciju.
  • Un daudz vairāk!

Norīt darbplūsma darbojas šādi:

Mēs varam izveidot uzdevumus, kurus mēs vēlētos izpildīt. Veicot šos uzdevumus, mēs ielādējam failus, ar kuriem vēlamies strādāt (modificējot vai nē), pēc tam tos atgriežam kādā atgriešanās mapē.

Tas ir vienkārši.

Šajā mazajā apmācībā es iemācīšu jums izveidot uzdevumu, lai samazinātu visus CSS failus jūsu mapē. Pēc tam ievietojiet mazinātos citā mapē.

Sāksim

Šajā apmācībā pārliecinieties, vai datorā ir instalēta jaunākā paketes npm versija. Ja jums to nav, varat to lejupielādēt šeit .

Kad esat instalējis npm, projekta pamatdirektorijā mēs instalēsim gulp, izmantojot šīs komandas:

npm install gulp-cli -g

npm install gulp -D

Mēs arī izmantosim gulp spraudni, lai samazinātu CSS, ko sauc par gulp-clean-css , tāpēc instalējiet to projekta tipā:

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

Ļoti labi, tagad ar projektā instalētajām atkarībām izveidosim failu ar nosaukumu Gulpfile.js . Šis fails būs atbildīgs par mūsu uzdevumiem.

Arī šajā krātuvē mēs izveidosim divas mapes. Vienu sauks par stiliem, kur paliks mūsu stila faili, un otru sauc par dist, kur nonāks saspiestie faili.

Galu galā mūsu projektam būs šāda struktūra:

Gulpfile.js

Faila sākumā mēs izsauksim paketes, kuras izmantosim.

Izmantojot izsauktās paketes, mēs izveidosim atbildīgu uzdevumu, samazinot mūsu failus.

Jūs varētu domāt - vai jūs jau varat samazināt failus? Jā, izpildot gulp komandu terminālā, kam seko uzdevuma nosaukums.

Bet visu laiku palaist šo komandu ir mazliet kaitinoši, vai ne? Mēs varam izveidot metodi failu izmaiņu novērošanai stilu mapē.

Tādā veidā, palaižot komandu gulp, tiks gaidītas izmaiņas atlasītajos failos, lai aktivizētu uzdevumu minify-css.

Secinājums

Tas ir tikai neliels veids, kā rīt mums var palīdzēt mūsu lietojumprogrammu izstrādē.

Šī projekta kodu varat atrast šajā GitHub krātuvē.

Paldies, ka lasījāt, lūdzu, nekautrējieties? un palīdzēt citiem to atrast.

Uz drīzu redzēšanos. ?

Atsauces

gulp.js

Ar dodot kodu pār konfigurācija, mezglu paraugpraksi, un minimālu API virsmas - malks padara lietas vienkārši tāpat ... gulpjs.com izdzert-tīrs-css

Samaziniet css ar clean-css. www.npmjs.com