Imaginile sunt peste tot pe internet. V-ar fi greu să găsiți o singură pagină sau aplicație care nu conține cel puțin o imagine într-o formă sau alta. Imaginile sunt o modalitate excelentă de a ne ajuta să spunem povești și să subliniem părți critice din viața noastră.

Dar dacă ești ca mine, știi că a avea o imagine mare poate avea un impact serios asupra performanței site-ului / aplicației tale. Deci, astăzi, vă voi învăța cum să utilizați Gulp și un npm pachetul numit gulp-imagemin pentru a reduce dimensiunea imaginilor dvs. din mers.

Dacă nu știi ce înseamnă toate aceste cuvinte, nu te teme! Am câteva linkuri / descrieri relevante și importante de mai jos pentru a vă ajuta să vă puneți la curent.

  • Minificare, sau reducerea după cum îmi place să o numesc, este actul sau procesul de eliminare a părților inutile ale codului sursă pentru a reduce dimensiunea.
  • Gulp este un instrument de compilare JavaScript care vă permite să automatizați părți din fluxul de lucru pentru a vă simplifica procesul. Se ocupă de unele aspecte nu atât de interesante, dar importante, ale fluxului de lucru (cum ar fi reducerea dimensiunii imaginii), astfel încât să vă puteți concentra asupra clădirii. Poti găsește Gulp aici.
  • Pentru a folosi npm va trebui să instalăm Node.js care este, pe scurt, cadrul care permite dezvoltatorilor să utilizeze cod JavaScript într-un mediu server (back end). Poti găsiți nodul aici.
  • npm (Node Package Manager) este și face ceea ce implică numele său. Este un manager de pachete pentru JavaScript și „cel mai mare registru de software din lume”. Gândește-te npm ca o zonă de stocare gigantică pentru pachete / utilități minunate pentru a ajuta dezvoltatorii. Poti găsiți aici npm.
  • gulp-imagemin este unul dintre acele pachete minunate pe care le-am menționat mai devreme. Folosind acest pachet vom putea reduce automat dimensiunea imaginilor noastre de fiecare dată când are loc o salvare. Poti găsiți gulp-imagemin aici.

Bine, acum că explicațiile sunt în afara modului, să ajungem la părțile distractive: D

Structura fișierului proiectului

Începeți prin deschiderea editorului de text la alegere și crearea unui director pentru proiectul dvs. sau dacă aveți un director existent navigați la acel director în terminal și treceți la Instalarea secțiunii Node & npm.

Dacă folosiți Cod VS puteți găsi construit în terminal lovind ctrl + ` (tilde).

Iată cum arată structura proiectului meu în terminalul meu:

Cum sa minimizati imaginile cu Gulp gulp imagemin si sa

Iată cum arată structura fișierului meu de proiect în exploratorul din VS Code:

1612076107 2 Cum sa minimizati imaginile cu Gulp gulp imagemin si sa

După cum puteți vedea, am un director separat pentru fișierele mele de bază și pentru fișierele minimizate. Odată ce ați stabilit directorul proiectului, este timpul să începeți instalarea a tot ce ne trebuie.

Instalarea Node & npm

Bine, acum că directorul nostru este în funcțiune, să începem să ne instalăm dependențele. Dacă ai deja Node & npm instalat, nu ezitați să treceți la Instalarea secțiunii Gulp & gulp-imagemin.

  1. Mai întâi, introduceți node --v în terminalul dvs. pentru a verifica și a vedea dacă aveți Nodul instalat. Dacă o faci, vei primi ceva înapoi de genul v8.9.3
  2. Dacă nu primiți nimic înapoi sau o eroare, pur și simplu descărcați și instalați nodul de aici. S-ar putea să dureze câteva minute, deci + să ai răbdare.
  3. O singura data Node.js este instalat, veți avea npm instalat, de asemenea, deoarece vine la pachet Node. Puteți verifica versiunea de npm prin tastare npm -v în terminalul tău. Ar trebui să primești ceva de genul 6.4.1înapoi.
  4. Apoi trebuie să creăm un package.json fișier pentru proiectul nostru. Facem acest lucru folosind comanda npm init (aflați mai multe despre package.json Aici). Vi se vor pune o serie de întrebări, dar dacă nu doriți să le răspundeți, nu trebuie, apăsați pe Enter până când vedeți Is this OK? (yes), apoi lovit Enter pentru ultima oară și veți termina cu această secțiune.
1612076107 819 Cum sa minimizati imaginile cu Gulp gulp imagemin si sa

Veți observa că acest fișier a fost creat într-un director diferit de cel cu care am început. Asta pentru a putea oferi un exemplu, deoarece am instalat anterior toate acestea în directorul meu curent de proiect.

Instalarea Gulp & gulp-imagemin

O singura data Node & npm au fost instalate, acum le putem instala Gulp & gulp-imagemin urmând acești pași:

  1. Mai întâi, tastați npm install --save-dev gulp în terminalul tău. Dacă doriți să știți ce --save-dev steagul face, verificați acest lucru Stack Post overflow.
  2. Din nou, aveți răbdare, deoarece instalarea Gulp ar putea dura un minut, dar în cele din urmă veți ajunge la așa ceva: gulp@4.0.0 added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. Puteți verifica versiunea Gulp tastând gulp -v în terminalul dvs. și veți obține ceva similar cu acesta: [13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. Acum să instalăm gulp-imagemin prin tastare npm install --save-dev gulp-imagemin și din nou, veți primi ceva de genul înapoi: gulp-imagemin@5.0.3 added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. Și ultimul pas pentru această secțiune este să ne creăm gulpfile.js Este foarte important ca fișierul dvs. să aibă acest nume exact și să se afle în cel mai înalt nivel al structurii folderelor de proiect!

Scrierea codului – În cele din urmă distracția!

Ok, acum că ne-am ocupat să instalăm totul în locul corect, să deschidem al nostru gulpfile.js și scrieți codul real care va face toată munca grea.

  1. Începeți prin a solicita gulp – & gt; const gulp = require('gulp‘); Profităm practic de sistemul de module Node pentru a utiliza codul care se află în diferite fișiere
  2. Acum cere gulp-imagemin – & gt; const imagemin = require('gulp-imagemin‘); Din nou, profităm de sistemul modulului pentru a folosi acest cod în proiectul nostru
  3. Acum, trebuie să scriem funcția care va face ca toată imaginea să fie zdrobită:
    function imgSquash() {
    return gulp .src("./img/*")
    .pipe(imagemin())
    .pipe(gulp.dest("./minified/images"));
    }
  4. Dacă vă configurați directorul urmând al meu, codul de mai sus va funcționa. Dacă directorul dvs. arată diferit, va trebui să schimbați fișierul .src & .dest linii care să se potrivească unde se află fișierele dvs. și unde doriți ca acestea să fie canalizate după ce au fost minimizate.
  5. Gulp funcționează pe baza sarcinilor și îi putem oferi o mulțime de persoane pentru a-l ține ocupat. Odată ce am definit funcția reală pentru a face greutăți, trebuie să spunem Gulp ce să faci cu această funcție: gulp.task("imgSquash", imgSquash);
  6. Acum, vrem Gulp pentru a urmări directorul nostru dat pentru modificări (imagini noi) și atunci când acesta le detectează, dorim ca acesta să ruleze automat imgSquash funcționează, micșorează-ne imaginile și direcționează-le către destinația pe care am stabilit-o. Obținem acest lucru definind o altă sarcină pentru a viziona directorul:
    gulp.task("watch", () => {
    gulp.watch("./img/*", imgSquash);
    });
  7. Ultimul pas pentru scrierea codului este definirea ultimei sarcini pe care să o apelăm imgSquash și watch sarcini succesive: gulp.task("default",gulp.series("imgSquash","watch")); Aici cuvântul „implicit” se referă la cuvânt gulp în terminal și în gulp.series se va asigura că imgSquash funcția rulează și imediat după Gulp va urmări directorul pentru modificări.

Iată cum ar trebui să arate fișierul nostru finalizat:

1612076107 756 Cum sa minimizati imaginile cu Gulp gulp imagemin si sa

Salvați acest fișier, deschideți terminalul și tastați gulp și apasă pe Enter. Ar trebui să vedeți așa ceva:

1612076108 386 Cum sa minimizati imaginile cu Gulp gulp imagemin si sa

După cum puteți vedea, de fiecare dată când un fișier nou a fost adăugat în directorul de bază, sarcinile noastre au început, deoarece Gulp a urmărit și a rulat imediat imgSquash funcția de minimizare a imaginilor noastre. Când ați terminat de utilizat Gulp, puteți lovi ctrl + c în terminalul dvs. pentru a termina procesul de ceas.

Acum puteți începe să utilizați imaginile minificate de pe site-ul / aplicația dvs. și să vă bucurați de noua creștere a performanței!

Învelire

Gulp este un instrument de construire JavaScript foarte puternic care vă poate ajuta să automatizați unele dintre aspectele mai plictisitoare, dar importante, ale construirii proiectului dvs. Cu mai puțin de o oră de muncă, ați reușit să reduceți imaginile, reducând astfel timpul de încărcare și sporind performanța site-ului / aplicației dvs. Este minunat și ar trebui să fii mândru de tine!

Acesta este doar unul dintre numeroasele moduri în care vă pot ajuta instrumente precum Gulp. Există mai multe modalități prin care vă poate ajuta (reducerea / concatenarea fișierelor CSS / JS) și sper să explorați unele dintre acele opțiuni minunate.

Dacă ți-a plăcut acest articol, te rog să iei în considerare donarea unor clape, deoarece îi ajută pe alții să-mi găsească munca. De asemenea, lăsați un comentariu și spuneți-mi la ce lucrați și cum vă ajută Gulp să vă concentrați asupra clădirii.

Și, în cele din urmă, acest articol a fost inițial postat pe blogul meu personal. În timp ce sunteți acolo, nu uitați să vă înscrieți la Buletin informativ care poate fi găsit în colțul din dreapta sus al paginii blogului meu. Îl trimit lunar (promit să nu vă trimit mesaje primite) și este plin de articole minunate de pe web, pe care cred că le veți găsi de ajutor.

Ca întotdeauna, aveți o zi minunată plină de dragoste, fericire și codificare!