Как да минимизирате изображенията с Gulp & gulp-imagemin и да подобрите производителността на вашия сайт

Изображенията са навсякъде в интернет. Трудно бихте намерили една страница или приложение, което да не съдържа поне едно изображение под някаква или друга форма. Изображенията са чудесен начин да помогнете да разказваме истории и да подчертаваме критични части от живота ни.

Но ако сте като мен, знаете, че наличието на голямо изображение може сериозно да повлияе на ефективността на вашия сайт / приложение. Така че днес ще ви науча как да използвате Gulp и npmпакет, наречен gulp-imageminза намаляване на размера на вашите изображения в движение.

Ако не знаете какво означават всички тези думи, не се страхувайте! Имам някои подходящи и важни връзки / описания по-долу, за да ви помогна да ускорите.

  • Минификацията или минимизирането, както обичам да го наричам, е актът или процесът на премахване на ненужните части на изходния код за намаляване на размера.
  • Gulpе инструмент за изграждане на JavaScript, който ви позволява да автоматизирате части от вашия работен процес, за да рационализирате процеса си. Той се грижи за някои не толкова интересни, но важни аспекти на вашия работен процес (като намаляване на размера на изображението), така че да можете да се съсредоточите върху сградата. Можете да намерите Gulp тук.
  • За да се възползваме от npmнас, ще трябва да инсталираме, Node.jsкоето накратко е рамката, която позволява на разработчиците да използват JavaScript код в сървърна (back end) среда. Можете да намерите Node тук.
  • npm(Node Package Manager) е и прави това, което подсказва името му. Това е мениджър на пакети за JavaScript и „най-големият софтуерен регистър в света“. Просто си npmпредставете за гигантска зона за съхранение на страхотни пакети / помощни програми, които да помогнат на разработчиците. Можете да намерите npm тук.
  • gulp-imageminе един от онези страхотни пакети, които споменах по-рано. Използвайки този пакет, ще можем автоматично да намаляваме размера на нашите изображения всеки път, когато настъпи запис. Можете да намерите gulp-imagemin тук.

Добре, сега, след като обясненията са извън пътя, нека стигнем до забавните части: D

Структура на файла на проекта

Започнете с отваряне на вашия текстов редактор по избор и създаване на директория за вашия проект или ако имате съществуваща директория, отидете до тази директория във вашия терминал и преминете надолу до раздела Инсталиране на възел & npm .

Ако използвате VS Code, можете да намерите вградения терминал, като натиснете ctrl + ` (tilde).

Ето как изглежда структурата на моя проект в моя терминал:

И ето как изглежда моята файлова структура на проекта в изследователя във VS Code:

Както можете да видите, имам отделна директория за основните си файлове и минимизираните файлове. След като установите директорията на проекта, е време да започнете да инсталирате всичко, от което се нуждаем.

Инсталиране на Node & npm

Добре, сега, когато нашата директория е стартирана и работи, нека започнем да инсталираме нашите зависимости. Ако вече сте Node & npmинсталирали, не се колебайте да преминете към раздела Инсталиране на Gulp & gulp-imagemin .

  1. Първо, влезте node --vв терминала си, за да проверите и да видите дали имате инсталиран Node. Ако го направите, ще си върнете нещо катоv8.9.3
  2. Ако не получите нищо обратно или грешка, просто изтеглете и инсталирайте Node от тук. Може да отнеме няколко минути, така че + бъдете търпеливи.
  3. След като Node.jsбъде инсталиран, вие също ще сте npmинсталирали, тъй като се доставя в комплект Node. Можете да проверите версията на, npmкато въведете npm -vв терминала си. Трябва да получите нещо като 6.4.1обратно.
  4. След това трябва да създадем package.jsonфайл за нашия проект. Правим това с помощта на командата npm init(научете повече за това package.jsonтук). Ще ви бъдат зададени поредица от въпроси, но ако не искате да отговорите на тях, не е нужно, просто натиснете Enter, докато видите Is this OK? (yes), след това натиснете за Enterпоследен път и ще приключите с този раздел.

Ще забележите, че този файл е създаден в различна директория от тази, с която започнах. Това е, за да мога да дам пример, тъй като преди това съм инсталирал всичко това в текущата си директория на проекта.

Инсталиране на Gulp & gulp-imagemin

Веднъж Node & npmинсталирани, вече можем да инсталираме, Gulp & gulp-imageminкато следваме тези стъпки:

  1. Първо въведете npm install --save-dev gulpтерминала си. Ако искате да знаете какво прави --save-devфлага, разгледайте тази публикация за препълване на стека.
  2. Отново, бъдете търпеливи, тъй като инсталирането на Gulp може да отнеме минута, но в крайна сметка ще получите нещо подобно: [email protected] added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
  3. Можете да проверите вашата версия на Gulp, като въведете gulp -vтерминала си и ще получите нещо подобно на това:[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
  4. Сега нека инсталираме, gulp-imageminкато напишем npm install --save-dev gulp-imageminи отново ще получите нещо подобно обратно: [email protected] added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
  5. И последната стъпка за този раздел е да създадем нашата. gulpfile.jsМного е важно вашият файл да има точното име и да е в най-външното ниво на структурата на папката на вашия проект!

Писане на кода - накрая забавлението!

Добре, сега, когато се погрижихме да инсталираме всичко на правилното място, нека отворим нашия gulpfile.jsи напишем действителния код, който ще свърши цялата упорита работа.

  1. Започнете с изискване gulp- & g t; const gulp = require('gulp'); Ние основно се възползваме от модулната система на Node, за да използваме код, който се намира в различни файлове
  2. Сега изискайте gulp-imagemin- & g t; const imagemin = require('gulp-imagemin'); Отново се възползваме от модулната система, за да използваме този код в нашия проект
  3. Сега трябва да напишем функцията, която ще направи цялото смачкване на изображението:

    function imgSquash() {

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

    .pipe(imagemin())

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

    }

  4. Ако настроите директорията си след моята, горният код ще работи. Ако вашата директория изглежда по различен начин, ще трябва да промените .src & .destредовете, за да съответстват на това къде се намират вашите файлове и къде искате да бъдат пренасочени, след като бъдат минифицирани.
  5. Gulpработи въз основа на задачи и ние можем да му дадем много от тях, за да бъде зает. След като определим действителната функция за извършване на тежко вдигане, трябва да кажем Gulpкакво да правим с тази функция:gulp.task("imgSquash", imgSquash);
  6. Сега искаме Gulpда наблюдаваме дадената от нас директория за промени (нови изображения) и когато тя ги открие, искаме тя автоматично да изпълнява нашата imgSquashфункция, да минимизира изображенията и да ги пренася до дестинацията, която сме задали. Постигаме това, като дефинираме друга задача да наблюдаваме директорията:

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

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

    });

  7. Последната стъпка към писането на кода е дефинирането на последната задача, която да извикаме, imgSquashи watchпоследователно задачите: Тук думата "по подразбиране" се отнася до думата в терминала и ще гарантира, че функцията работи и веднага след Gulp ще следи директорията за промени. gulp.task("default",gulp.series("imgSquash","watch"));gulpgulp.seriesimgSquash

Ето как трябва да изглежда нашият завършен файл:

Запазете този файл, отворете терминала си и въведете gulpи натиснете enter. Трябва да видите нещо подобно:

Както можете да видите, всеки път, когато нов файл беше добавен към основната директория, нашите задачи се включваха, защото Гълп гледаше и веднага стартира нашата imgSquashфункция за минимизиране на нашите изображения. Когато приключите с Gulp, можете да натиснете ctrl + cтерминала, за да прекратите процеса на гледане.

Сега можете да започнете да използвате вашите минифицирани изображения на вашия уебсайт / приложение и да се насладите на този нов намерен тласък в производителността!

Увийте

Gulp е много мощен инструмент за изграждане на JavaScript, който може да помогне за автоматизирането на някои от по-досадни, но важни аспекти на изграждането на вашия проект. С по-малко от час работа можете да минимизирате вашите изображения, като по този начин намалите времето за зареждане и увеличите производителността на вашия уебсайт / приложение. Това е страхотно и трябва да се гордеете със себе си!

Това е само един от многото начини, по които може да ви помогне да създадете инструменти като Gulp. Има много повече начини, по които може да помогне (минимизиране / обединяване на CSS / JS файлове) и се надявам да проучите някои от тези страхотни опции.

Ако харесате тази статия, моля, помислете за даряване на някои пляски, тъй като помага на другите да намерят моята работа. Освен това пуснете коментар и ме уведомете върху какво работите и как Gulp ви помага да се съсредоточите върху сградата.

И накрая, тази статия първоначално беше публикувана в личния ми блог. Докато сте там, не забравяйте да се регистрирате за бюлетина, който можете да намерите в горния десен ъгъл на страницата на моя блог. Изпращам го ежемесечно (обещавам да не изпращам входящата ви поща) и е изпълнен със страхотни статии от мрежата, които мисля, че ще ви помогнат.

Както винаги, имайте страхотен ден, пълен с любов, щастие и кодиране!