Sådan minimeres billeder med Gulp & gulp-imagemin og øger dit websteds ydeevne

Billeder er overalt på internettet. Du ville blive hårdt presset for at finde en enkelt side eller et program, der ikke indeholder mindst et billede i en eller anden form. Billeder er en fantastisk måde at hjælpe med at fortælle historier og understrege kritiske dele af vores liv.

Men hvis du er som mig, ved du, at det at have et stort billede alvorligt kan påvirke ydeevnen på dit websted / din app. Så i dag vil jeg lære dig, hvordan du bruger Gulp og en npmpakke kaldet gulp-imagemintil at reducere størrelsen på dine billeder i farten.

Hvis du ikke ved, hvad alle disse ord betyder, frygt ikke! Jeg har nogle relevante og vigtige links / beskrivelser nedenfor for at hjælpe dig med at komme op i hastighed.

  • Minificering eller minificering, som jeg gerne kalder det, er handlingen eller processen med at fjerne unødvendige dele af kildekoden for at reducere størrelsen.
  • Gulper et JavaScript-byggeværktøj, der giver dig mulighed for at automatisere dele af din arbejdsgang for at strømline din proces. Det tager sig af nogle ikke så interessante, men vigtige aspekter af din arbejdsgang (som at reducere billedstørrelse), så du kan fokusere på bygningen. Du kan finde Gulp her.
  • For at gøre brug af skal npmvi installere, Node.jssom i en nøddeskal er rammen, der giver udviklere mulighed for at bruge JavaScript-kode i et servermiljø (back-end). Du kan finde Node her.
  • npm(Node Package Manager) er og gør, hvad navnet antyder. Det er en pakkehåndtering til JavaScript og "verdens største softwareregister". Tænk bare på npmsom et kæmpe lagerområde til fantastiske pakker / hjælpeprogrammer til at hjælpe udviklere. Du kan finde npm her.
  • gulp-imageminer en af ​​de fantastiske pakker, jeg nævnte tidligere. Ved hjælp af denne pakke kan vi automatisk reducere størrelsen på vores billeder hver gang der gemmes. Du kan finde gulp-imagemin her.

Okay, nu hvor forklaringer er ude af vejen, lad os komme til de sjove dele: D

Projektfilstruktur

Start med at åbne din valgte teksteditor og oprette en mappe til dit projekt, eller hvis du har en eksisterende mappe, skal du navigere til den mappe i din terminal og springe ned til afsnittet Installering af node & npm .

Hvis du bruger VS-kode, kan du finde den indbyggede terminal ved at trykke ctrl + ` (tilde).

Sådan ser min projektstruktur ud i min terminal:

Og sådan ser min projektfilstruktur ud i opdagelsesrejsende inde i VS-kode:

Som du kan se, har jeg en separat mappe til mine basisfiler og de minificerede filer. Når du har oprettet din projektmappe, er det tid til at begynde at installere alt, hvad vi har brug for.

Installation af Node & npm

Okay, nu hvor vores bibliotek er i gang, lad os begynde at installere vores afhængigheder. Hvis du allerede har Node & npminstalleret, er du velkommen til at springe ned til afsnittet Installation af Gulp & gulp-imagemin .

  1. Indtast først node --vinden for din terminal for at kontrollere, om du har noden installeret. Hvis du gør det, får du noget tilbage somv8.9.3
  2. Hvis du ikke får noget tilbage eller en fejl, skal du blot downloade og installere Node herfra. Det kan tage et par minutter, så vær tålmodig.
  3. Når det Node.jser installeret, har du også npminstalleret det, fordi det følger med Node. Du kan kontrollere versionen af npmved at skrive npm -vdin terminal. Du skulle få noget som 6.4.1tilbage.
  4. Dernæst skal vi oprette en package.jsonfil til vores projekt. Vi gør dette ved at bruge kommandoen npm init(find ud af mere package.jsonher). Du bliver stillet en række spørgsmål, men hvis du ikke ønsker at besvare dem, behøver du ikke at trykke på Enter, indtil du ser Is this OK? (yes), og tryk derefter Enteren sidste gang, så er du færdig med dette afsnit.

Du bemærker, at denne fil blev oprettet i en anden mappe end den, jeg startede med. Dette er så jeg kan give et eksempel, da jeg tidligere har installeret alt dette i min nuværende projektmappe.

Installation af Gulp & gulp-imagemin

Når vi Node & npmer blevet installeret, kan vi nu installere Gulp & gulp-imageminved at følge disse trin:

  1. Indtast først npm install --save-dev gulpdin terminal. Hvis du vil vide, hvad --save-devflaget gør, skal du tjekke dette Stack Overflow-indlæg.
  2. Igen skal du være tålmodig, da installation af Gulp kan tage et øjeblik, men i sidste ende ender du med noget som dette: [email protected] added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. Du kan tjekke din Gulp-version ved at skrive gulp -vdin terminal, og du får noget lignende:[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. Lad os nu installere gulp-imageminved at skrive, npm install --save-dev gulp-imageminog igen får du noget som dette tilbage: [email protected] added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. Og det sidste trin for dette afsnit er at oprette vores. gulpfile.jsDet er meget vigtigt, at din fil har dette nøjagtige navn og er i det yderste niveau af din projektmappestruktur!

Skrivning af koden - endelig det sjove!

Ok, nu hvor vi har sørget for at installere alt på det rigtige sted, lad os åbne vores gulpfile.jsog skrive den aktuelle kode, der vil gøre alt det hårde arbejde.

  1. Start med at kræve gulp- & g t; const gulp = require('gulp'); Vi drager stort set fordel af Nodes modulsystem til at bruge kode, der er placeret i forskellige filer
  2. Kræv nu gulp-imagemin- & g t; const imagemin = require('gulp-imagemin'); Igen drager vi fordel af modulsystemet til at bruge denne kode i vores projekt
  3. Nu er vi nødt til at skrive den funktion, der vil gøre alt billedet squashing:

    function imgSquash() {

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

    .pipe(imagemin())

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

    }

  4. Hvis du indstiller din mappe efter min, fungerer koden ovenfor. Hvis din mappe ser anderledes ud, skal du ændre .src & .destlinjerne, så de svarer til, hvor dine filer er placeret, og hvor du vil have dem sendt til, efter at de er blevet minificeret.
  5. Gulpfungerer baseret på opgaver, og vi kan give det masser af dem til at holde det travlt. Når vi har defineret den faktiske funktion til at udføre tunge løft, er vi nødt til at fortælle, Gulphvad vi skal gøre med denne funktion:gulp.task("imgSquash", imgSquash);
  6. Nu ønsker vi Gulpat se vores givne bibliotek for ændringer (nye billeder), og når den registrerer dem, vil vi have, at den automatisk kører vores imgSquashfunktion, minimerer vores billeder og sender dem til den destination, vi indstiller. Vi opnår det ved at definere en anden opgave for at se biblioteket:

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

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

    });

  7. Det sidste trin til at skrive koden er at definere den sidste opgave, der skal kaldes vores imgSquashog watchopgaver i rækkefølge: Her henviser ordet "standard" til ordet i terminalen, og det vil sikre, at funktionen kører, og umiddelbart efter vil Gulp se biblioteket for ændringer. gulp.task("default",gulp.series("imgSquash","watch"));gulpgulp.seriesimgSquash

Sådan ser vores færdige fil ud:

Gem denne fil, åbn din terminal, og skriv gulpog tryk enter. Du skal se noget som dette:

Som du kan se, hver gang en ny fil blev tilføjet til basekataloget, startede vores opgaver, fordi Gulp så og straks kørte vores imgSquashfunktion for at minimere vores billeder. Når du er færdig med at bruge Gulp, kan du slå ctrl + ci din terminal for at afslutte overvågningsprocessen.

Nu kan du begynde at bruge dine minificerede billeder på din hjemmeside / app og nyde det nye fundne boost i ydeevne!

Pak ind

Gulp er et meget kraftfuldt JavaScript-værktøj, der kan hjælpe med at automatisere nogle af de mere kedelige, men vigtige aspekter af opbygningen af ​​dit projekt. Med mindre end en times arbejde var du i stand til at få dine billeder minificeret, hvilket reducerede indlæsningstiden og øgede ydeevnen til dit websted / din app. Det er fantastisk, og du skal være stolt af dig selv!

Dette er blot en af ​​de mange måder, hvorpå man kan bygge værktøjer som Gulp kan hjælpe dig. Der er mange flere måder, det kan hjælpe (minificering / sammenkædning af CSS / JS-filer), og jeg håber, du udforsker nogle af disse fantastiske muligheder.

Hvis du kunne lide denne artikel, kan du overveje at donere nogle klapper, da det hjælper andre med at finde mit arbejde. Giv også en kommentar, og lad mig vide, hvad du arbejder på, og hvordan Gulp hjælper dig med at fokusere på bygningen.

Og endelig blev denne artikel oprindeligt sendt på min personlige blog. Mens du er der, skal du ikke glemme at tilmelde dig nyhedsbrevet, som findes øverst til højre på min blogside. Jeg sender den ud hver måned (jeg lover ikke at spam din indbakke), og den er fyldt med fantastiske artikler fra hele internettet, som jeg tror, ​​du finder nyttige.

Som altid har du en fantastisk dag fuld af kærlighed, lykke og kodning!