Hogyan lehet minimalizálni a képeket a Gulp & gulp-imagemin segítségével, és hogyan növelheti webhelye teljesítményét?

A képek az interneten mindenütt megtalálhatók. Nehezen találna egyetlen oldalt vagy alkalmazást, amely valamilyen formában nem tartalmaz legalább egy képet. A képek nagyszerű segítséget nyújtanak a történetek elmesélésében és életünk kritikus részeinek hangsúlyozásában.

De ha olyan vagy, mint én, akkor tudod, hogy a nagy kép birtoklása komolyan befolyásolhatja webhelye / alkalmazás teljesítményét. Tehát ma megtanítalak arra, hogyan használd a Gulp-ot és egy npmcsomagot gulp-imagemin, amellyel menet közben csökkentheted képeid méretét.

Ha nem tudja, mit jelentenek ezek a szavak, ne féljen! Az alábbiakban van néhány releváns és fontos linkem / leírásom, amelyek segítenek a felgyorsulásban.

  • A kicsinyítés, vagy a miniatűrítés, ahogy én szeretem nevezni, a forráskód felesleges részeinek eltávolítása a méret csökkentése érdekében.
  • Gulpegy JavaScript-összeállító eszköz, amely lehetővé teszi a munkafolyamat egyes részeinek automatizálását a folyamat ésszerűsítése érdekében. Gondoskodik a munkafolyamat néhány nem annyira érdekes, de fontos aspektusáról (például a képméret csökkentése), hogy az épületre koncentrálhasson. Gulp itt található.
  • A használat érdekében npmtelepítenünk kell Node.jsegy dióhéjban azt a keretrendszert, amely lehetővé teszi a fejlesztők számára, hogy a JavaScript-kódot kiszolgálói (háttérvégi) környezetben használják. A Node itt található.
  • npmA (Node Package Manager) az, amit a neve is jelent. Ez egy csomagkezelő a JavaScript-hez és "a világ legnagyobb szoftver-nyilvántartásához". Gondoljon csak arra, npmmint egy hatalmas tárhelyre, ahol fantasztikus csomagok / segédprogramok szolgálják a fejlesztőket. Az npm itt található.
  • gulp-imageminegyike azoknak a fantasztikus csomagoknak, amelyeket korábban említettem. Ennek a csomagnak a használatával képesek leszünk automatikusan csökkenteni képeink méretét minden egyes mentéskor. Itt talál a gulp-imagemin.

Rendben, most, hogy nincsenek magyarázatok, térjünk át a szórakoztató részekre: D

Projekt fájl felépítése

Először nyissa meg a kiválasztott szövegszerkesztőt, és hozzon létre egy könyvtárat a projektjéhez, vagy ha van már könyvtár, keresse meg a terminált az adott könyvtárba, és ugorjon le a Csomópont telepítése & npm szakaszra .

Ha VS-kódot használ, akkor a beépített terminált találhatja meg ctrl + ` (tilde).

Így néz ki a projektem szerkezete a terminálomban:

És így néz ki a projektfájl-struktúrám a VS Code belsejében található felfedezőben:

Amint láthatja, külön könyvtáram van az alapfájljaimhoz és a kicsinyített fájlokhoz. Miután létrehozta a projektkönyvtárát, itt az ideje elkezdeni telepíteni mindent, amire szükségünk lesz.

A Node & npm telepítése

Rendben, most, hogy a könyvtárunk működik, kezdjük el telepíteni a függőségeinket. Ha már Node & npmtelepítette, nyugodtan ugorjon le a Gulp & gulp-imagemin telepítése szakaszra .

  1. Először lépjen node --vbe a terminálba, és ellenőrizze, hogy telepítve van-e a Node. Ha megteszi, akkor visszakap valami hasonlótv8.9.3
  2. Ha nem kap semmit vagy hibát, egyszerűen töltse le és telepítse a Node-ot innen. Ez eltarthat néhány percig, ezért + légy türelmes.
  3. A Node.jstelepítés után npmtelepítenie is kell, mert mellékelve van Node. A verzióját ellenőrizheti a terminál npmbeírásával npm -v. Valami hasonlót kellene kapnia 6.4.1.
  4. Ezután létre kell hoznunk egy package.jsonfájlt a projektünkhöz. Ezt a parancs használatával tesszük npm init( package.jsonitt többet megtudhat ). Kérdések sorozatát fogják feltenni neked, de ha nem akarsz válaszolni rájuk, akkor nem kell, csak nyomd meg az Enter billentyűt, amíg meg nem jelenik Is this OK? (yes), majd kattints még Enterutoljára, és ezzel befejezed ezt a részt.

Észre fogja venni, hogy ezt a fájlt egy másik könyvtárban hozták létre, mint amivel kezdtem. Így tudok példát hozni, mivel mindezt korábban telepítettem a jelenlegi projektkönyvtáramba.

A Gulp & gulp-imagemin telepítése

A Node & npmtelepítés után most Gulp & gulp-imagemina következő lépésekkel telepíthetjük :

  1. Először írja npm install --save-dev gulpbe a terminált. Ha tudni szeretné, hogy a --save-devzászló mit csinál, nézze meg ezt a Stack Overflow bejegyzést.
  2. Ismét legyünk türelmesek, mivel a Gulp telepítése eltarthat egy percig, de végül valami ilyesmire jut: [email protected] added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. A gulp -vterminál beírásával ellenőrizheti a Gulp verzióját, és ehhez hasonlót kap:[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. Most telepítsük gulp-imagemingépeléssel, npm install --save-dev gulp-imageminés ismét valami ilyesmit kap vissza: [email protected] added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. És ennek a szakasznak az utolsó lépése a mi létrehozása. gulpfile.jsNagyon fontos, hogy a fájljának pontosan ez a neve legyen, és a projekt mappaszerkezetének legfelső szintjén legyen!

A kódex megírása - Végül a szórakozás!

Ok, most, hogy gondoskodtunk arról, hogy mindent a megfelelő helyre telepítsünk, nyissuk meg a sajátunkat, gulpfile.jsés írjuk meg a tényleges kódot, amely elvégzi a nehéz munkát.

  1. Kezdje azzal, hogy megköveteli gulp- & g t; const gulp = require('gulp'); Alapvetően kihasználjuk a Node modulrendszerének előnyeit a különböző fájlokban található kódok használatára
  2. Most igényel gulp-imagemin- & g t; const imagemin = require('gulp-imagemin'); Ismét kihasználjuk a modulrendszer előnyeit, hogy ezt a kódot felhasználjuk projektünkben
  3. Most meg kell írnunk azt a függvényt, amely az összes képet összecsapja:

    function imgSquash() {

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

    .pipe(imagemin())

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

    }

  4. Ha az enyém nyomán állítja be könyvtárát, akkor a fenti kód működni fog. Ha a könyvtár másképp néz ki, akkor meg kell változtatnia a .src & .destsorokat, hogy azok illeszkedjenek a fájlok helyéhez és a csatoláshoz, ahová át szeretné őket csatolni.
  5. Gulpfeladatokon kívül működik, és rengeteg olyan embert tudunk neki adni, hogy elfoglalt legyen. Miután meghatároztuk a nehéz emelés tényleges funkcióját, meg kell mondanunk Gulp, hogy mit kezdjünk ezzel a funkcióval:gulp.task("imgSquash", imgSquash);
  6. Most meg akarjuk Gulpfigyelni a megadott könyvtárunkat a változások (új képek) szempontjából, és amikor ezeket észleli, azt akarjuk, hogy automatikusan futtassa a imgSquashfunkciónkat, kicsinyítse képeinket és a beállított rendeltetési helyre vezesse őket. Ezt úgy érjük el, hogy meghatározunk egy másik feladatot a könyvtár megtekintésére:

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

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

    });

  7. A kód megírásának utolsó lépése meghatározza az utoljára meghívandó feladatot imgSquashés a watchfeladatokat egymás után: Itt az "alapértelmezett" szó a terminálon lévő szóra vonatkozik , és biztosítani fogja, hogy a függvény fusson, és közvetlenül azután , hogy a Gulp figyelni fogja a könyvtárat változtatások. gulp.task("default",gulp.series("imgSquash","watch"));gulpgulp.seriesimgSquash

Így kell kinéznie a kész fájlunknak:

Mentse el ezt a fájlt, nyissa meg a terminált, írja be gulpés nyomja meg az Enter billentyűt. Valami ilyesmit kellene látnia:

Mint láthatja, minden egyes alkalommal, amikor új fájlt adtak az alapkönyvtárhoz, a feladataink beindultak, mert Gulp figyelte, és azonnal lefuttatta a imgSquashfunkciónkat a képeink kicsinyítéséhez. Miután befejezte a Gulp használatát ctrl + c, a terminálon megnyomhatja az óraműveletet .

Most elkezdheti használni a tömörített képeket a webhelyén / alkalmazásában, és élvezheti a teljesítmény új fellendülését!

Csomagolás

A Gulp egy nagyon hatékony JavaScript-összeállító eszköz, amely automatizálhatja a projekt felépítésének néhány unalmasabb, de fontos szempontját. Kevesebb, mint egy órás munkával miniatűríteni tudta képeit, csökkentve ezzel a betöltési időt és növelve a webhely / alkalmazás teljesítményét. Ez fantasztikus, és büszkének kell lenned magadra!

Ez csak egy a sokféle módszer közül, amelyek segítségével a Gulphoz hasonló eszközök készíthetők. Sokkal többféleképpen segíthet (CSS / JS fájlok tömörítése / összefűzése), és remélem, hogy felfedez néhány ilyen fantasztikus lehetőséget.

Ha tetszett ez a cikk, fontolja meg néhány taps adományozását, mivel ez segít másoknak megtalálni a munkámat. Ezenkívül adj meg egy megjegyzést, és tudasd velem, min dolgozol, és a Gulp hogyan segít az épületre koncentrálni.

És végül, ezt a cikket eredetileg a személyes blogomon tették közzé. Amíg ott vagy, ne felejts el regisztrálni a Hírlevélre, amely a blogom jobb felső sarkában található. Havonta küldöm el (ígérem, hogy nem spamelem a beérkező leveleket), és félelmetes cikkekkel van tele az egész interneten, amelyeket szerintem hasznosnak talál.

Mint mindig, legyen fantasztikus napja, tele szeretettel, boldogsággal és kódolással!