Първи стъпки с Grunt

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

Увеличете

Тук той влиза Grunt, което не е нищо повече от резултата от това търсене на автоматизация и намаляване на грешките и спестяване на труд. Създаден през 2012 г., той набира популярност до днес и е почти съществен елемент от всяка среда, която съдържа JavaScript като език за разработка.
Какво е Grunt?Това е инструмент за командния ред или конзолата JavaScript който е отговорен за изпълнението на задачи, които се повтарят и отнемат много време, например, ако трябва да минимизираме и компресираме кода JavaScript, всеки път, когато променяме файл, трябва да изпълним тези две задачи, с Grunt това е автоматично, всеки път, когато сменяме файловете Grunt отговаря за изпълнението на тези задачи.
Благодарение на този вид функционалност Grunt е намерила страхотен прием в света на развитието, особено тези, които основават своето развитие наоколо JavaScript със среди като Node.js o CoffeeScript, което доведе до голяма общност с повече от 2000 плъгина в хранилищата npm, които работят с Grunt.
Уеб приложенията днес нарастват не само по размер, но и по сложност, което ни води до разработване на количество код и изграждане на инструменти, които надхвърлят човешкия лимит за изчерпателен преглед, поради което възниква разработка, базирана на тестове или TDD, и по същия начин има допълнителни задачи, които не са свързани с кода, които ни позволяват да оптимизираме нашето приложение.
Grunt ни помага с втората част от подхода, позволява ни да намалим времето, което трябва да инвестираме в изпълнението на задачи, и по този начин ни помага да се съобразим с принципа СУХ, да не се повтаряме. Ето защо трябва да използваме Grunt за да спестите време и да намалите вероятността от грешки.
Вече знаем какво е това и защо трябва да го използваме, но има още малко да се говори Grunt, където едно от най -важните неща е да знаем какви ползи ни носи, от по -голяма последователност в нашето приложение до приближаване към общността на програмистите, тогава нека разгледаме ползите малко по -подробно.
ЕфективностПонякога си мислим, че правенето на неща ръчно ни спестява времето да се наложи да проучим и внедрим някои инструменти, но се оказва, че натрупаното време на седмица или на месец става прекомерно, при което можем да загубим до 4 или 5 часа, с Grunt това се намалява, тъй като просто след като автоматизираме задачата, в края на деня освобождаваме тези екзекуции от нашите ръце.
ПоследователностКакто споменахме в началото, човешкото същество е предразположено към грешки и следователно чрез автоматизиране можем да ги намалим, Grunt Това ни дава възможност да изпълним всичко точно по начина, по който сме проверили, че няма грешки, като по този начин изважда човешкия фактор от уравнението и оптимизираме задачите си.
ЕфикасностИзграждайки набор от автоматизирани задачи, можем да накараме ума си да се справи с проблемите, които наистина се нуждаят от нашето внимание, а като изпълняваме по -малко задачи, ще бъдем по -малко уморени, така че ще бъдем по -ефективни.
ОбщностАко има нещо, което сме смятали, че ни е необходимо за нашата автоматизирана среда, то със сигурност съществува и то благодарение на големите предимства на Grunt Създадена е силна общност от плъгини, която можем да използваме свободно и безплатно много пъти, като по този начин ни спестяваме много повече работа.
След като познаваме теоретичните концепции, предимствата, причините за използването му и други интересни аспекти на GruntВреме е да приложим на практика всичко, което сме научили, затова нека започнем с инсталирането на този страхотен инструмент в нашата среда.
Grunt Той е междуплатформен, така че можем да го използваме на Windows, Mac и Linux, поради практически причини по време на този урок ще видим инсталацията в среда WindowsПроцесът обаче не е много различен в другите системи, след като първоначалното изискване бъде изпълнено.
Node.js и неговия мениджър на пакети и модули npm са основното изискване преди инсталирането Grunt, в момента и двата инструмента се предлагат в една и съща инсталация, така че трябва само да инсталираме Node.js В нашата система този процес е много прост и е обяснен в други уроци, но просто посетете официалния уебсайт на проекта nodejs.org, за да разберете как да инсталирате за нашата операционна система.

Увеличете

След като сме изтеглили и имаме Node.js работещи на нашата система, ние сме готови за следващата стъпка.
Инсталирането на Grunt много е просто, ще получим инструмента Grunt CLI, тоест интерфейсът на командния ред, което ще ни позволи да използваме конзолата като начин да посочим Grunt задачите, които трябва да бъдат изпълнени. За това ще използваме npm и неговите хранилища, които винаги се актуализират до последната стабилна версия на проекта.
За да направим това, просто трябва да изпълним следната инструкция в нашата командна конзола:

 npm install -g grunt -cli

Това действие ще ни остави инструмента вече инсталиран, както виждаме на следващата екранна снимка на нашата конзола.

Както видяхме, инсталацията беше много проста и само за няколко секунди оставя системата ни готова за употреба Grunt. Сега трябва да отидем в папка, където се намира проект, с който искаме да се свържем Grunt и изпълняваме следната инструкция:

 npm инсталирайте grunt

Това ще ни позволи да се включим Grunt в нашия проект и по този начин започнете да го използвате, нека да видим какво ни казва конзолата, когато правим това:

Следващата ни стъпка сега е да генерираме файловете package.json Y Gruntfile.js, и двете са жизненоважни за нашето приложение, за да можем да отговорим на всички необходими зависимости, както и да посочим Grunt какво да правим ефективно. Тези файлове са ключови, тъй като са своеобразна рамка, върху която npm Y Grunt те ще бъдат поддържани, ако не съществуват в нашия проект, ще имаме проблеми с използването на инструмента.
За генериране на съдържанието на package.json Достатъчно е да използваме команда, която ще ни даде първоначална конфигурация, за това първо трябва да създадем празен файл, наречен package.json, много е важно в него да има две скоби {}, така че да се тълкува като JSON, тогава в нашата конзола трябва да изпълним следното в същата директория на нашия проект:

 npm install --save grunt grunt-contrib-uglify

Което ще ни даде следното съобщение в командната конзола:

И накрая, ако видим нашия файл package.json Ще видим, че е актуализиран със следното съдържание:

Сега трябва да създадем файла Gruntfile.js, това е кой ще каже Grunt всичко, което трябва да бъде изпълнено в нашата среда, така че да е жизненоважна част, основната структура на този файл е следната:

 module.exports = function (grunt) {// ето съдържанието на нашите задачи};

След коментара е, че можем да поставим нашите различни планирани задачи, които ще направим, когато изпълним командата мрънка всички инструкции, които сме поставили в този файл, се изпълняват в нашата конзола.
Тъй като вече сме видели достатъчно съдържание, ще оставим създаването на автоматизирани задачи за друг път, важното е, че сме разбрали, че е Grunt, какви са изискванията, от които се нуждаем, за да го инсталираме и всичко, което ни предлага.
С това приключваме този урок, ако искаме да отидем малко по -дълбоко, можем да влезем в официалната документация на инструмента, който е на английски, и по този начин да усъвършенстваме някои знания, които можем да приложим на практика по -късно.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка