Kaip sumažinti vaizdus naudojant „Gulp & gulp-imagemin“ ir padidinti savo svetainės našumą

Vaizdai yra visur internete. Jums būtų sunku rasti vieną puslapį ar programą, kurioje nebūtų bent vieno paveikslėlio. Vaizdai yra puikus būdas padėti pasakoti istorijas ir pabrėžti kritines mūsų gyvenimo dalis.

Bet jei esate panašus į mane, žinote, kad turėdami didelį vaizdą galite labai paveikti jūsų svetainės / programos našumą. Taigi šiandien aš išmokysiu jus naudoti „Gulp“ ir npmpaketą, kurį norite pakelti, gulp-imageminkad sumažintumėte savo vaizdų dydį.

Jei nežinote, ką reiškia visi šie žodžiai, nebijokite! Toliau pateikiu keletą svarbių ir svarbių nuorodų / aprašų, kurie padės jums greičiau naudotis.

  • Sumažinimas arba susilpninimas, kaip aš norėčiau jį pavadinti, yra nereikalingų šaltinio kodo dalių pašalinimas, siekiant sumažinti dydį.
  • Gulpyra „JavaScript“ kūrimo įrankis, leidžiantis automatizuoti darbo eigos dalis, kad supaprastintumėte procesą. Tai rūpinasi ne tokiais įdomiais, bet svarbiais jūsų darbo eigos aspektais (pvz., Vaizdo dydžio mažinimu), kad galėtumėte sutelkti dėmesį į pastatą. Gulp galite rasti čia.
  • Norėdami pasinaudoti, npmturėsime įdiegti sistemą, Node.jskuri, trumpai tariant, leidžia kūrėjams naudoti „JavaScript“ kodą serverio (galinės pusės) aplinkoje. „Node“ rasite čia.
  • npm(„Node Package Manager“) yra ir daro tai, ką reiškia jo pavadinimas. Tai „JavaScript“ paketų tvarkyklė ir „didžiausias pasaulyje programinės įrangos registras“. Tiesiog pagalvokite apie npmmilžinišką nuostabių paketų / komunalinių paslaugų saugojimo zoną, kuri galėtų padėti kūrėjams. Npm galite rasti čia.
  • gulp-imageminyra vienas iš tų nuostabių paketų, kuriuos minėjau anksčiau. Naudodami šį paketą galėsime automatiškai sumažinti vaizdų dydį kiekvieną kartą, kai bus išsaugotas. Čia rasite „gulp-imagemin“.

Gerai, dabar, kai paaiškinimų nėra, pereikime prie linksmų dalių: D

Projekto bylos struktūra

Pradėti atverdama savo teksto redaktorių pasirinkimo ir sukurti katalogą savo projektui ar turite esamą katalogas Vykti į tą katalogą, savo terminalą ir praleisti žemyn į Diegimas mazgo ir NPM skirsnyje .

Jei naudojate „VS Code“, galite rasti įmontuotą terminalą spustelėdami ctrl + ` (tilde).

Štai kaip mano projekto struktūra atrodo mano terminale:

Štai kaip mano projekto failo struktūra atrodo VS kodo naršyklėje:

Kaip matote, turiu atskirą katalogą savo pagrindiniams failams ir susikaupusiems failams. Sukūrę savo projekto katalogą, laikas pradėti diegti viską, ko mums reikės.

Diegiamas mazgas & npm

Gerai, dabar, kai mūsų katalogas veikia ir veikia, pradėkime diegti savo priklausomybes. Jei jau Node & npmįdiegėte, nedvejodami pereikite prie „ Installing Gulp & gulp-imagemin“ skyriaus .

  1. Pirmiausia įveskite node --vterminalą, kad patikrintumėte, ar turite įdiegtą mazgą. Jei tai padarysite, gausite kažką panašausv8.9.3
  2. Jei nieko negrąžinate ar klaidos, tiesiog atsisiųskite ir įdiekite „Node“ iš čia. Tai gali užtrukti kelias minutes, todėl + būkite kantrūs.
  3. Kai Node.jsyra įdiegtas, jūs turite npmįdiegti, taip pat, nes ji yra siejama su Node. Versiją galite patikrinti npmįvesdami npm -vsavo terminalą. Turėtumėte gauti kažką panašaus 6.4.1atgal.
  4. Tada turime sukurti package.jsonfailą savo projektui. Tai darome naudodami komandą npm init(daugiau sužinosite package.jsončia). Jums bus užduota keletas klausimų, tačiau jei nenorite į juos atsakyti, jums nereikia, tiesiog paspauskite „Enter“, kol pamatysite Is this OK? (yes), tada paspauskite Enterpaskutinį kartą ir būsite baigę šią skiltį.

Jūs pastebėsite, kad šis failas buvo sukurtas kitame kataloge, nei aš pradėjau. Taip galiu pateikti pavyzdį, nes anksčiau visa tai buvau įdiegusi savo dabartiniame projekto kataloge.

Diegimas „Gulp & gulp-imagemin“

Kai Node & npmbuvo įdiegta, mes dabar gali įdiegti Gulp & gulp-imageminatlikdami šiuos veiksmus:

  1. Pirmiausia įveskite npm install --save-dev gulpsavo terminalą. Jei norite sužinoti, ką daro --save-devvėliava, peržiūrėkite šį „Stack Overflow“ įrašą.
  2. Vėlgi, būkite kantrūs, nes „Gulp“ diegimas gali užtrukti minutę, bet galų gale jums bus kažkas panašaus: [email protected] added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. Galite patikrinti savo „Gulp“ versiją įvesdami gulp -vsavo terminalą ir gausite kažką panašaus į šį:[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. Dabar įdiegkime gulp-imageminįvesdami npm install --save-dev gulp-imageminir vėl gausite kažką panašaus atgal: [email protected] added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. Paskutinis šio skyriaus žingsnis yra sukurti mūsų. gulpfile.jsLabai svarbu, kad jūsų failas turėtų būtent tokį pavadinimą ir būtų išoriniame aukščiausio lygio jūsų projekto aplanko struktūroje!

Rašyti kodeksą - pagaliau linksmybės!

Gerai, dabar, kai pasirūpinome, kad viskas būtų įdiegta tinkamoje vietoje, atsiverskime gulpfile.jsir parašykime tikrąjį kodą, kuris atliks visą sunkų darbą.

  1. Pradėkite nuo reikalavimo gulp- & g t; const gulp = require('gulp'); Mes iš esmės naudojame „Node“ modulio sistemą, kad galėtume naudoti kodą, esantį skirtinguose failuose
  2. Dabar reikalauti gulp-imagemin- & g t; const imagemin = require('gulp-imagemin'); Vėlgi mes naudojame modulio sistemą, kad galėtume naudoti šį kodą savo projekte
  3. Dabar turime parašyti funkciją, kuri padarys visą vaizdą:

    function imgSquash() {

    return gulp .src("./img/*")

    .pipe(imagemin())

    .pipe(gulp.dest("./minified/images"));

    }

  4. Jei nustatysite katalogą vadovaudamiesi mano, aukščiau pateiktas kodas veiks. Jei jūsų katalogas atrodo kitaip, turėsite pakeisti .src & .desteilutes, kad jos sutaptų, kur yra jūsų failai ir kur norite juos perduoti.
  5. Gulpveikia ne pagal užduotis, ir mes galime suteikti jai daug tų, kurie jį užimtų. Apibrėžę faktinę sunkiojo kėlimo funkciją, turime pasakyti, Gulpką daryti su ta funkcija:gulp.task("imgSquash", imgSquash);
  6. Dabar norime Gulpstebėti, ar mūsų pateiktame kataloge nėra pakeitimų (naujų vaizdų), o kai jis juos aptinka, norime, kad jis automatiškai paleistų mūsų imgSquashfunkciją, sutrumpintų vaizdus ir nukreiptų juos į nustatytą paskirties vietą. Tai pasiekiame apibrėždami kitą užduotį žiūrėti katalogą:

    gulp.task("watch", () => {

    gulp.watch("./img/*", imgSquash);

    });

  7. Paskutinis kodo įrašymo žingsnis apibrėžia paskutinę užduotį, kurią mums paskambins, imgSquashir watchužduotis iš eilės: Čia žodis „numatytasis“ reiškia terminale esantį žodį ir užtikrins, kad funkcija veiktų ir iškart po to, kai „Gulp“ stebės katalogą pokyčiai. gulp.task("default",gulp.series("imgSquash","watch"));gulpgulp.seriesimgSquash

Štai kaip turėtų atrodyti mūsų baigtas failas:

Išsaugokite šį failą, atidarykite terminalą, įveskite gulpir paspauskite „Enter“. Turėtumėte pamatyti kažką tokio:

Kaip matote, kiekvieną kartą, kai prie pagrindinio katalogo buvo pridėtas naujas failas, mūsų užduotys prasidėjo, nes Gulpas stebėjo ir iškart vykdė mūsų imgSquashfunkciją, kad sumažintų vaizdus. Baigę naudoti „Gulp“ galite paspausti ctrl + csavo terminalą ir nutraukti žiūrėjimo procesą.

Dabar galite pradėti naudoti savo suglaudintus vaizdus savo svetainėje / programoje ir mėgautis tuo nauju rastu našumu!

Apvyniokite

„Gulp“ yra labai galingas „JavaScript“ kūrimo įrankis, kuris gali padėti automatizuoti kai kuriuos nuobodžius, bet svarbius projekto kūrimo aspektus. Dirbdami mažiau nei valandą, galėjote sutrumpinti vaizdus, ​​taip sutrumpindami įkėlimo laiką ir padidindami savo svetainės / programos našumą. Tai nuostabu ir jūs turėtumėte didžiuotis savimi!

Tai tik vienas iš daugelio būdų, kaip sukurti tokius įrankius kaip „Gulp“. Yra daug kitų būdų, kaip tai gali padėti (suskaidyti / susieti CSS / JS failus), ir aš tikiuosi, kad jūs ištyrinėsite kai kurias iš šių nuostabių parinkčių.

Jei jums patiko šis straipsnis, apsvarstykite galimybę paaukoti keletą plojimų, nes tai padeda kitiems rasti mano darbą. Be to, atsisakykite komentaro ir praneškite man, ką dirbate ir kaip „Gulp“ padeda susitelkti ties pastatu.

Galiausiai, šis straipsnis iš pradžių buvo paskelbtas mano asmeniniame tinklaraštyje. Būdami ten nepamirškite prisiregistruoti gauti naujienlaiškį, kurį rasite viršutiniame dešiniajame mano tinklaraščio puslapio kampe. Siunčiu jį kas mėnesį (pažadu ne šlamšti jūsų pašto dėžutės) ir jis užpildytas nuostabiais straipsniais iš viso interneto, kurie, manau, jums bus naudingi.

Kaip visada, turėkite nuostabią meilės, laimės ir kodavimo dieną!