Noțiuni de bază cu Grunt

În prezent, când vorbim despre dezvoltarea web, există factori care ne obligă să depindem de un număr mare de sarcini pe care trebuie să le executăm odată ce am creat codul și mult mai mult dacă folosim JavaScript , deoarece există diferite instrumente de care avem nevoie pentru a ne face aplicația cât mai optimă posibil.
Deoarece tot ceea ce depinde de ființa umană tinde să nu fie întotdeauna perfect și să fie alcătuit din erori, căutăm întotdeauna o modalitate de a construi procese cât mai curate posibil și de a le automatiza, deoarece greșelile sunt mai puțin probabil să fie făcute dacă punem toate atenția noastră asupra ceva o dată și apoi lăsăm postul său rulat la o mașină.

MARI

Aici intervine Grunt, care nu este altceva decât rezultatul acelei căutări de automatizare și reducerea erorilor și a economiilor de muncă. Creat în 2012, a crescut în popularitate până astăzi este un element aproape esențial al oricărui mediu care conține JavaScript ca limbaj de dezvoltare.
Ce este Grunt?Este un instrument pentru linia de comandă sau consolă JavaScript care este responsabil pentru executarea sarcinilor care sunt repetitive și care necesită mult timp, de exemplu dacă trebuie să micșorăm și să comprimăm codul JavaScript, de fiecare dată când modificăm un fișier trebuie să executăm aceste două sarcini, cu Grunt aceasta este automată, de fiecare dată când schimbăm fișierele Grunt este însărcinat cu executarea acestor sarcini.
Datorită acestui tip de funcționalitate Grunt a găsit o mare primire în lumea dezvoltării, în special în cei care își bazează dezvoltarea în jur JavaScript cu medii precum Node.js o CoffeeScript, care a condus la o comunitate mare cu peste 2000 de pluginuri în depozitele npm cu care funcționează Grunt.
Aplicațiile web de astăzi sunt în creștere nu numai ca dimensiune, ci și ca complexitate, ceea ce ne determină să dezvoltăm o cantitate de cod și să construim instrumente care depășesc limita umană pentru o revizuire exhaustivă, de aceea apare dezvoltarea bazată pe teste sau TDDși, în același mod, există sarcini suplimentare care nu au legătură cu codul care ne permit să ne optimizăm aplicația.
Grunt ne ajută cu a doua parte a abordării, ne permite să reducem timpul pe care trebuie să-l investim în executarea sarcinilor și astfel ne ajută să respectăm principiul USCAT, să nu ne repetăm. De aceea trebuie să folosim Grunt pentru a economisi timp și pentru a reduce probabilitatea de a greși.
Știm deja ce este și de ce ar trebui să-l folosim, dar mai sunt încă ceva de vorbit Grunt, unde unul dintre cele mai importante lucruri este să știm ce beneficii ne aduce, de la o mai mare consistență în aplicația noastră până la abordarea comunității de dezvoltatori, atunci să vedem beneficiile mai puțin în detaliu.
EficienţăUneori credem că a face lucrurile manual ne economisește timpul de investigare și implementare a unor instrumente, dar se dovedește că timpul acumulat pe săptămână sau pe lună devine excesiv, unde putem pierde până la 4 sau 5 ore, cu Grunt acest lucru este redus, întrucât pur și simplu odată ce am automatizat sarcina, la sfârșitul zilei eliberăm acele execuții din mâinile noastre.
CoerențăDupă cum am menționat la început, ființa umană este predispusă la erori și, prin urmare, prin automatizare, putem reduce acestea, Grunt Ne oferă posibilitatea de a executa totul exact așa cum am verificat că nu are erori, scoțând astfel factorul uman din ecuație și optimizându-ne sarcinile.
EficacitateConstruind un set de sarcini automate, ne putem face mintea să se ocupe de problemele care necesită într-adevăr atenția noastră și, executând mai puține sarcini, vom fi mai puțin obosiți, astfel încât vom fi mai eficienți.
ComunitateDacă există ceva de care am crezut că avem nevoie pentru mediul nostru automatizat, acesta există cu siguranță și datorită marilor avantaje ale Grunt A fost construită o comunitate puternică de pluginuri pe care o putem folosi în mod liber și gratuit de multe ori, economisindu-ne astfel mult mai multă muncă.
Odată ce am cunoscut conceptele teoretice, avantajele, motivele utilizării acestuia și alte aspecte interesante ale GruntEste timpul să putem pune în practică tot ceea ce am învățat, așa că să începem prin instalarea acestui instrument grozav în mediul nostru.
Grunt Este multiplataforma, deci îl putem folosi pe Windows, Mac și Linux, din motive practice în timpul acestui tutorial vom vedea instalarea într-un mediu WindowsCu toate acestea, procesul nu este foarte diferit în celelalte sisteme odată ce cerința inițială este îndeplinită.
Node.js și managerul său de pachete și module npm sunt cerința principală înainte de instalare Grunt, în prezent ambele instrumente vin în aceeași instalare, deci trebuie doar să le instalăm Node.js În sistemul nostru, acest proces este foarte simplu și a fost explicat în alte tutoriale, totuși, trebuie doar să vizitați site-ul oficial al proiectului nodejs.org pentru a afla cum să instalați sistemul nostru de operare.

MARI

Odată ce am descărcat și avem Node.js rulând pe sistemul nostru suntem pregătiți pentru următorul pas.
Instalarea de Grunt este foarte simplu, vom obține instrumentul Grunt CLI, adică interfața liniei de comandă, ceea ce ne va permite să folosim consola ca mod de a indica Grunt sarcinile care trebuie îndeplinite. Pentru aceasta vom folosi npm și depozitele sale care sunt întotdeauna actualizate la cea mai recentă versiune stabilă a proiectului.
Pentru a face acest lucru, trebuie pur și simplu să rulăm următoarea instrucțiune în consola noastră de comandă:

 npm instala -g grunt-cli

Această acțiune ne va lăsa instrumentul deja instalat așa cum vedem în următoarea captură de ecran a consolei noastre.

După cum am putut vedea, instalarea a fost foarte simplă și cu doar câteva secunde ne lasă sistemul gata de utilizare Grunt. Acum trebuie să mergem la un folder în care se află un proiect cu care dorim să legăm Grunt și executăm următoarea instrucțiune:

 npm instala grunt

Acest lucru ne va permite să încorporăm Grunt în proiectul nostru și astfel începem să-l folosim, să vedem ce ne spune consola când facem acest lucru:

Următorul nostru pas acum este să generăm fișierele pachet.json Da Gruntfile.js, ambele sunt vitale pentru aplicația noastră, astfel încât să putem îndeplini toate dependențele de care avem nevoie și, de asemenea, să le indicăm Grunt ce să faci în mod eficient. Aceste fișiere sunt esențiale, deoarece sunt un fel de cadru, pe care npm Da Grunt vor fi sprijiniți, dacă nu există în proiectul nostru, vom avea probleme cu utilizarea instrumentului.
Pentru a genera conținutul fișierului pachet.json Este suficient pentru noi să folosim o comandă care ne va oferi o configurație inițială, pentru aceasta trebuie mai întâi să creăm un fișier gol numit pachet.json, este foarte important ca în interior să conțină două paranteze {} astfel încât să fie interpretat ca JSON, apoi în consola noastră trebuie să executăm următoarele în același director al proiectului nostru:

 npm install --save grunt grunt-contrib-uglify

Ceea ce ne va da următorul mesaj în consola de comandă:

În cele din urmă, dacă vedem fișierul nostru pachet.json Vom vedea că a fost actualizat cu următorul conținut:

Acum trebuie să creăm fișierul Gruntfile.js, acesta este cine va spune Grunt tot ce trebuie executat în mediul nostru, deci este o parte vitală, structura de bază a acestui fișier este următoarea:

 module.exports = function (grunt) {// aici este conținutul sarcinilor noastre};

După comentariu este că putem plasa diferitele noastre sarcini programate, care se vor face atunci când executăm comanda mormăi toate instrucțiunile pe care le-am plasat în acest fișier sunt executate în consola noastră.
Deoarece am văzut deja suficient conținut, vom lăsa crearea de sarcini automate pentru altă dată, important este că am înțeles că este Grunt, care sunt cerințele de care avem nevoie pentru ao instala și tot ce ne oferă.
Cu aceasta încheiem acest tutorial, dacă vrem să mergem un pic mai adânc, putem intra în documentația oficială a instrumentului care este în limba engleză și astfel putem avansa unele cunoștințe pe care le putem pune în practică mai târziu.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv