MINISTERUL EDUCAŢIEI ȘI TINERETULUI AL REPUBLICII MOLDOVA

UNIVERSITATEA DE STAT TIRASPOL

FACULTATEA FIZICĂ, MATEMATICĂ ȘI TEHNOLOGII INFORMAŢIONALE
CATEDRA INFORMATICĂ ȘI TEHNOLOGII INFORMAŢIONALE

Domeniul general de studii:

Știinţe ale Educaţiei

Specialitatea:
Informatică

Teză de licență

Automatizare în JavaScript – manageri de sarcini .

Autor:_____________
studentul ciclului I, gr. 3I, Cojocari Andrei .

Conducător stiinţific: ___________

Lector superior, Andrei Braicov

Şeful catedrei ITI_____________

Prof.univ.,dr.hab., Liubomir Chiriac

Chișinău – 2018

1
 Cuprins

Introducere .............................................................................................................................. 3
Capitolul I. Aspecte generale ................................................................................................. 5
§1. Ce înseamnă automatizare ? ....................................................................................................... 5
§2. Beneficii .................................................................................................................................... 5
§3. Puțină istorie .............................................................................................................................. 6
§4. Manageri de sarcini pentru JavaScript ....................................................................................... 6
§5. Concluzii ................................................................................................................................. 12
Capitolul II. Configurarea componentelor necesare ........................................................ 14
§1. Instalarea Node.js ..................................................................................................................... 14
§2. Instalarea npm........................................................................................................................... 15
§3. Instalarea gulp........................................................................................................................... 16
§4. Instalarea git ............................................................................................................................. 17
§5. Instalarea bower ....................................................................................................................... 22
Capitolul III. Lucru cu gulp ................................................................................................ 23
§1. Definirea fișierului „package.json” .......................................................................................... 24
§2. Definirea fișierului „bower.json” ............................................................................................. 28
§3. Instalarea gulp........................................................................................................................... 16
§4. Instalarea git ............................................................................................................................. 17
§5. Instalarea bower ....................................................................................................................... 22
Concluzii .................................................................................... Error! Bookmark not defined.
Bibliografie ................................................................................ Error! Bookmark not defined.
Cuvinte cheie ............................................................................. Error! Bookmark not defined.

2
 Introducere

Domeniul tehnologiei informației care se ocupă cu dezvoltarea aplicațiilor web a atins cel mai
mare progres în ultimii câțiva ani. Aplicațiile web moderne nu se deosebesc aproape deloc în ce
privește designul și funcționalitățile față de aplicațiile desktop clasice.

De la apariția lor până în zilele noastre, aplicațiile web au parcurs un drum lung de la pagini text
statice cu câte o imagine până la versiuni moderne care manipulează datele, execută logica pe client,
folosesc servicii web și baze de date.

Importanța tot mai mare a aplicațiilor web a influențat și cererea crescută de experți cu pregătire care
se vor ocupa cu crearea lor. Acesta a fost unul dintre motivele de bază pentru tema Tezei de Licenta
“Automatizare în JavaScript – manageri de sarcini” și pregătirea mea pentru unul dintre cele mai
de perspectivă domenii IT.

Deci mai departe voi descrie putin cele mai de baza notiuni necesare pentru a intelege aplicatia
creata de mine.

HTML este prescurtarea de la Hyper Text Mark-up Language și este codul care stă la baza paginilor
web. Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm .În marea lor
majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>,
mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browserul interpretează
aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face
deosebirea între litere mici și mari). Pagina principală a unui domeniu este fișierul index.html
respectiv index.htm Această pagină este setată a fi afișată automat la vizitarea unui domeniu.

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină,
utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de
astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui
document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare
pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt
trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și
formulare. Metadatele pot include informații despre titlul și autorul documentului, informații
3
structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și
informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma
astfel hiperlink-uri (sau web-ul).

CSS este un limbaj de stilizare al elementelor html, al tagurilor html. Denumirea CSS provine din
expresia Cascading Style Sheets. In Web Design-ul modern, pentru stilizarea paginilor web se
folosește numai CSS. Acest lucru înseamnă că de la culoarea literelor și a backgroundului până și la
poziționarea elementelor de pe o pagina web, totul este stilizat prin CSS. Stilurile folosite pe o
pagină pot fi încorporate în pagina respectivă sau pot fi chemate din fișiere externe, fișiere css.

JavaScript este un limbaj de tip script cu obiecte (object-oriented) destinat să opereze în mai multe
sisteme de operare (cross-platform). Nucleul JavaScript conţine un set de obiecte predefinite precum
Array, Date şi Math, precum şi un set principal de elemente de limbaj precum operatori, structuri de
control şi instrucţiuni. Nucleul JavaScript poate fi extins pentru o multitudine de scopuri prin
completarea sa cu obiecte suplimentare spre exemplu:

 Client-side JavaScript extinde nucleul limbajului furnizând obiecte pentru a controla un

browser (Navigator sau alt tip de browser) şi modelul său de obiect document (Document
Object Model - DOM). De exemplu, extensiile client-side permit unei aplicații să plaseze
elemente într-o formă HTML şi să răspundă evenimentelor generate de utilizator precum
clicuri cu mouse-ul, date de completare a unui formular şi navigarea propriuzisă (activitatea
definitorie pe care o deservesc browsere).
 Server-side JavaScript extinde nucleul limbajului furnizând obiecte pentru a rula programe
JavaScript pe un server. De exemplu, extensiile server-side permit unei aplicaţii să comunice
cu o bază de date relațională, asigură continuitatea informaţiei de la o invocare la alta a
aplicaţiei, sau efectuează operaţii asupra unor fişiere pe un server.

JavaScript permite crearea unor aplicaţii care să ruleze în Internet. Aplicațiile client rulează pe un
browser, precum Netscape Navigator, iar aplicaţiile server rulează pe un server, precum Netscape
Enterprise Server. Prin utilizarea JavaScript pot fi create pagini HTML dinamice (dynamic HTML),
pagini care procesează datele introduse de utilizator şi întreţin date persistente prin utilizarea unor
obiecte speciale, a fişierelor şi a bazelor de date relaționale

4
Node.js este o platformă construită pe motorul V8 al Chrome și se bazează pe un model event-
driven si non-blocking I/O, folosind callback-uri. Este construită pe runtime-ul JavaScript de la
Chrome, favorizează modularitatea, iar aplicatiile sale single-thread sunt scrise in JavaScript.

Node.js este ideal pentru câteva tipuri de proiecte de dezvoltare de software. Pentru a evalua dacă
este alegerea potrivită pentru nevoile tale particulare, consultanții noștri vor discuta cu tine cerințele
tale tehnice și de business și vor determina dacă Node este într-adevăr cea mai bună opțiune pentru
proiectul tău sau îți vor recomanda cea mai bună alternativa. Iată mai jos câteva exemple de cazuri
în care această platformă dă cele mai bune rezultate.

Capitolul I. Aspecte generale

Implimentarea aplicațiilor client nu mai înseamnă de multă vreme doar „scripting”, ci a ajuns la un
nivel foarte avansat în ultimii ani. Node.js a facilitat apariția „managerilor de sarcini”, împingând și
mai departe posibilitățile tehnologiilor front-end.

1.1 Ce înseamnă automatizare ?

Pe scurt, înseamnă simplificarea oricărui proces repetitiv. Aproape orice proces tehnologic are o
componentă automatizată. Uitați-vă, spre exemplu, la:

 liniile de producție a diverselor fabrici;

 laboratoarele foto;
 automatele de cafea etc.

Daca e să ne raportăm la IT, câteva exemple de automatizare ar fi:

 redimensionarea (sau orice altă procesare) a unui număr mare de imagini;

 importarea informațiilor dintr-un fișier XML/text, într-o bază de date;
 redenumirea unor fișiere, după o anumită regulă.

5
1.2 Beneficii

Oricare din procesele menționate mai sus ar necesita foarte multă muncă manuală, repetitivă. Deși
se spune că „repetiția este mama învățării”, faptul că redimensionezi manual 1500 imagini pe
parcursul a 2-3 zile, nu te învață absolut nimic în plus (în afară de răbdare), față de redimensionarea
a doar 2 imagini.

Automatizând acest proces, prin utilizarea unui soft adecvat sau printr-un script care să efectueze
singur această muncă, vom câștiga timp pe care îl putem investi în alte procese, mai creative.

Mai mult decât atât, având acel soft sau script disponibil, îl vom putea reutiliza oricând pe viitor. În
consecință, beneficiile se acumulează cu timpul.

Spre deosebire de liniile de producție ale fabricilor, unde automatizarea reduce numărul de locuri de
muncă, în IT nu va trebui să vă faceți probleme de acest fel, deoarece nu va influența negativ în
niciun fel postul vostru sau al colegilor.

1.3 Puțină istorie

Manageri de sarcini și metode de automatizare există de foarte multă vreme implementate în

limbajele de programare și în tehnologiile server:

 Make, pentru sisteme Unix; ( https://www.gnu.org/software/make/ )

 Rake, pentru Ruby; (http://rake.rubyforge.org/)
 Ant sau Maven, pentru Java; (http://ant.apache.org/) (http://maven.apache.org/)
 Bamboo, Buildout sau Jenkins, pentru Continuous Integration.
(https://www.atlassian.com/software/bamboo) ( http://jenkins-ci.org/ )

6
Tehnologiile front-end (cele care rulează în browser) nu au avut nevoie inițial de asemenea sisteme,
deoarece contextul în care erau utilizate era limitat. Însă în ultimii ani, aplicațiile și tehnologiile
client au devenit din ce în ce mai complexe, dezvoltându-se:

 template engine-uri;
 framework-uri;
 pre-procesoare CSS si JavaScript;
 strategii de optimizare etc.

Multe dintre aceste „jucării” noi necesitau la rândul lor anumite soft-uri sau script-uri speciale
pentru a le executa. Așadar, la un moment dat ajungeai să fii nevoit să folosești multe soft-uri sau
script-uri diferite pentru a îți executa întregul set de procesare.

1.4 Manageri de sarcini pentru JavaScript .

Developerii front-end simțeau tot mai mult nevoia să aibă un manager de sarcini „pe înțelesul lor”.
Era destul de dificil să construiești manageri, sau script-uri automatizate, utilizând sistemele mai sus
menționate, deoarece erai nevoit să înveți încă un limbaj.

Așadar, odată cu apariția lui Node.js și a posibilității de a rula cod JavaScript pe server, nu doar în
browser, apariția sistemelor de build dedicate problemelor și tehnologiilor front-end era doar o
chestiune de timp.

Iată câteva dintre actualii manageri de sarcini, în ordinea apariției lor:

 Jake – martie 2010; ( https://github.com/mde/jake )

 Brunch – ianuarie 2011; ( http://brunch.io/ )

 Grunt – septembrie 2011; ( http://gruntjs.com/ )

 Mimosa – decembrie 2012; ( http://mimosa.io/ )

7
 Broccoli – aprilie 2013; ( https://github.com/joliss/broccoli )

 Gulp – iulie 2013; ( http://gulpjs.com/ )

Toti managerii de sarcini bazati pe JavaScript au nevoie de Node.js pentru a rula. De asemenea,
toate se instalează prin intermediul npm-ului, managerul de pachete pentru Node.js și se rulează din
linia de comandă (CMD sau Terminal).

Jake

Jake.js este primul dintre acești manageri de sarcini, construit peste Node.js. Conceptul din spatele
lui și modul de configurare este similar cu cel din Make (pentru Linux) sau Rake (pentru Ruby), de
unde și asemănarea numelui.

Nu există plugin-uri pentru Jake. Definirea proceselor se face low-level, prin code-over-
configuration. Practic, se pot utiliza orice pachete pentru Node.js.

AVANTAJE:

 flexibilitate maximă în definirea proceselor, deoarece nu există configurări specifice

sau plugin-uri dedicate.

DEZAVANTAJE:

 curbă mare de învățare, în special pentru începători;

 fișierele de procese tind să fie lungi și nu foarte ușor de citit și înțeles.

Grunt

Grunt este, probabil, cel mai popular manager de sarcini, lucru dovedit prin numărul impresionant
de plugin-uri și prin faptul că este inclus în Yeoman. De asemenea, Grunt e utilizat de jQuery,
Twitter Boostrap, Zurb Foundation, Mozilla, WordPress, JSBin, Modernizr ș.a.m.d.

8
Documentația foarte bine pusă la punct, dar și multitudinea de resurse care pot fi găsite, fac din
Grunt un sistem cu o curbă rapidă de învățare. De asemenea, setarea proceselor se face prin
configurarea plugin-urilor, ceea ce este extrem de simplu și rapid.

Grunt nu este doar un manager de sarcini pentru aplicații web. Nu face absolut nimic „din proprie
inițiativă”, fără să îi specificăm noi, spre deosebire de celelalte sisteme. Acesta utilizează fișiere
temporare în rularea proceselor, ceea ce îl face considerabil mai lent decât alte sisteme care
utilizează conceptul de streams.

AVANTAJE:

 număr crescut de utilizatori;

 număr mare de plugin-uri disponibile;

 curbă rapidă de învățare, deoarece procesele trebuie doar configurate.

DEZAVANTAJE:

 relativ lent, în comparație cu sistemele care utilizează streams;

 fișierele de procese tind să fie lungi când avem multe procese configurate.

Brunch

Brunch este un sistem mult mai simplu decât Jake sau Grunt, însă în același timp, este mai limitat ca
posibilități. Brunch se dorește a fi doar un manager de sarcini pentru aplicații web. Vine implicit cu
anumite „păreri” despre cum ar trebui să îți dezvolți aplicația (fișier de configurare .coffee,
dependințe Bower, o anumită structură a proiectului), însă toate acestea sunt opționale.

Spre deosebire de celelalte sisteme, Brunch vine implicit cu suport pentru crearea unui proiect gol,
bazat pe unul dintre scheletele disponibile. De asemenea, Brunch utilizează conceptul de streams,
ceea ce îl face mult mai rapid decât Grunt.

Sincer, mi-a fost greu să găsesc documentație și exemple care să mă ajute să scriu de la zero fișierul
de configurare. La fel, și documentația plugin-urilor este destul de limitată.

AVANTAJE:
9
 setup rapid, utilizând schelete și generatoare;

 viteză mare de execuție;

 curbă rapidă de învățare, deoarece procesele trebuie doar configurate.

DEZAVANTAJE:

 număr relativ mic de plugin-uri;

 flexibilitate mică în utilizare.

Mimosa

Mimosa pare să semene oarecum cu Brunch. Pentru a defini procese, tot ce avem de făcut este să
configurăm plugin-urile de care avem nevoie. Pe site-ul lor este menționat că nu folosesc
configurări, iar setările se fac prin cod, însă exemplele lor dovedesc exact contrariul.

De asemenea, are o metodă foarte rapidă, similară cu cea a lui Brunch, de a genera schelete de
proiect. Spre deosebire de Brunch, Mimosa utilizează un wizard, care îți pune întrebări legate de
tehnologiile pe care dorești să le utilizezi în proiect.

Și Mimosa vine cu anumite „presetări” legate de structura proiectului, care pot fi ușor modificate, iar
documentația este foarte bine pusă la punct.

AVANTAJE:

 setup rapid, utilizând wizard-ul nativ;

 curbă rapidă de învățare, deoarece procesele trebuie doar configurate;

 documentație consistentă.

DEZAVANTAJE:

 număr relativ mic de plugin-uri;

 comunitate relativ mică.

10
 Gulp

The streaming build system

Gulp este un sistem relativ nou, apărut în 2013, care dorește să se diferențieze de ceilalti manageri
de sarcini prin viteză și simplitate. Viteza o deține deoarece utilizează același concept de streams ca
și Brunch. Fișierele de configurare tind să fie destul de scurte datorită API-ului simplu, dar, în
același timp, eficient. Deși este un sistem relativ tânăr, a avut o creștere foarte rapidă în ultimul
timp.

AVANTAJE:

 viteză mare de execuție;

 număr considerabil de plugin-uri;

 fișierele de procese rămân relativ scurte, chiar dacă definim multe procese.

DEZAVANTAJE:

 dependințe: necesită să aveți Python instalat. Pe platforma Windows necesită și Visual Studio/.NET
pentru compilatorul de C/C++.

Broccoli

Broccoli este un alt sistem destul de recent, care se află încă în beta, la ora actuală. Pare foarte
similar cu Gulp: utilizează același concept de streams, modul de definire a proceselor este tot prin
cod, nu prin configurare.

Există 2 diferențe demne de menționat, între Broccoli și Gulp:

AVANTAJE:

 cu Gulp se pot înlănțui procese, iar cu Broccoli nu;

 Broccoli lucrează doar cu „directoare”, nu cu „fișiere” individuale, fapt care, după spusele lor,
aduce un plus de putere.

 viteză mare de execuție.

11
 DEZAVANTAJE:

 foarte tânăr, încă în beta;

 număr mic de plugin-uri;

 documentație subțire, exemple puține.

Analiză comparativă a managerilor de sarcini

Alte sisteme

Există și alti manageri de sarcini, însă din cauza popularității scăzute, le vom enumera pe scurt:

Bud
A apărut în aprilie 2013. Utilizează conceptul de code over configuration.

SimpleBuild
A apărut în decembrie 2013, așadar este destul de „tânăr”. Modulele sale pot fi integrate cu Grunt
sau Jake.

12
 Fez
Pare a fi cel mai nou sistem, dezvoltat în februarie 2014. Momentan are doar 12 plugin-uri
disponibile.

1.5 Concluzii

Există multe criterii care pot fi luate în calcul în alegerea unui manager de sarcini. Pentru a ușura
tragerea concluziilor, vom elimina sistemele care se află la extremele negative:

 Jake – nu are plugin-uri, făcându-l mai dificil de utilizat decât restul. În același timp, popularitatea
sa este destul de scăzută;

 Mimosa – are un număr redus de plugin-uri, iar popularitatea sa este, de asemenea, redusă;

 Broccoli – deși promite să se „lupte” cu Gulp, este încă în beta, are un număr limitat de plugin-uri
și, din ce spun ei, încă nu au suport pentru Windows.

1. Numărul de plugin-uri

Pentru aplicații simple, acest criteriu este irelevant. Puteți utiliza liniștit oricare din sistemele
menționate mai sus, deoarece toate conțin plugin-uri pentru cele mai uzuale procese:

 compilare CSS din sintaxa LESS, SASS sau Stylus;

 compilare JavaScript din sintaxa CoffeeScript sau TypeScript;

 compilare template-uri Jade sau Handlebars;

 concatenare și minifiere CSS, JavaScript;

 validare sintaxa CSS, JavaScript (linting);

13
 rulare teste QUnit, Jasmine sau Mocha.

Lucrurile se „complică” în momentul în care avem nevoie de procese non-uzuale. Cel mai bine este
să verificați lista de plugin-uri a sistemului dorit, pentru a vă asigura că plugin-urile sale acoperă
toate nevoile.

Câștigător detașat la această categorie este Grunt.

2. Cod sau Configurare?

Este greu de spus care este mai „bun”, întrucât depinde foarte mult de gusturile fiecăruia și de
nivelul de cunoștințe:

 configurarea este, de obicei, mai simplă, pentru că ai doar de „umplut” niște spații goale, pe baza
unei documentații. Așadar, este mai la îndemână pentru începători. Pe de altă parte, devii oarecum
limitat de lista de opțiuni disponibile. Sisteme recomandate: Grunt sau Brunch;

 codul este, de obicei, puțin mai dificil, mai ales pentru începători. În schimb, ai flexibilitate mult
mai mare, deoarece nu ești limitat de opțiunile de configurare. Sistem recomandat: Gulp.

3. Viteza

La capitolul viteză, fără nici un dubiu, Gulp și Brunch ies în față. Diferența de viteză între cele
două și Grunt, de exemplu, poate să ajungă și la ordinul zecilor de secunde, pentru aplicații
complexe, cu multe procese și multe fișiere de procesat. Așadar, acesta poate fi un factor decisiv în
unele situații.

4. Popularitatea

Criteriul de popularitate este unul foarte important; unui sistem care nu are deloc popularitate îi vor
lipsi resursele online. Așadar, dacă nimeni nu îl folosește, nimeni nu va scrie despre el și, în
consecință, ne va fi greu să găsim răspunsuri la eventuale întrebări.

14
Din acest punct de vedere, Grunt este, din nou, lider. Cu toate acestea, nu putem ignora creșterea
foarte rapidă în popularitate a lui Gulp care, în mai puțin de jumătate de an, a reușit să atragă multe
aprecieri pe Github, dar și un număr considerabil de plugin-uri.

***

În continuare, vom începe să explorăm în detaliu sistemul Grunt. Motivele pentru care am ales
acest sistem sunt oarecum evidente:

 este foarte popular;

 este foarte ușor de înțeles pentru începători;

 în același timp, conferă o flexibilitate ridicată și pentru nevoi avansate.

In capitolul urmator vom examina mai îndeaproape procesul de asamblare a front-end-ului.

Capitolul II. Configurarea componentelor necesare

Să încercăm să facem împreună un manager de sarcini complex - de fiecare dată când scriem ceva
în fișierul nostru CSS, vom minimiza si concatena CSS-ul și vom stoca o copie într-un anumit dosar
făcând din câteva fișiere CSS doar unul care conține tot codul.Același lucru îl vom face și cu js-ul.
Fiecare imagine incarcata in proiecta va fi optimizata inadata . Iar de indata ce am redacta codul
html,css sau js pagina va face automat un refresh pentru a vedea schimbările.

Pentru a face toate acestea, trebuie să vă echipați cu niște instrumente: Nod.js, npm (node package
manager, manager de pachete Node) și Gulp.

Ar trebui să știți cum să utilizați linia de comandă – cmd în Windows sau Terminal în Linux. De
asemenea, trebuie să știți cum să navigați de la un dosar la altul în linia de comandă și cum să creați
dosare și fișiere.

15
2.1 Instalarea Node.js

Pentru a instala Node.js mergeți la site-ul oficial: nodejs.org. În funcție de sistemul de operare,
alegem un fișier corect pentru instalare. Vom folosi un Windows Installer pe 64 de biți. Ar trebui să
utilizați pachetul în funcție de configurația dvs.

După descărcarea fișierului, faceți click pe el și rulați installerul.Trecem prin pași și așteptăm până
când se termină instalarea.

Trecem prin pași și așteptăm până când expertul termină instalarea.

16
Asta e tot. Se recomandă să lăsați setările implicite în timpul instalării.

După instalare, asigurați-vă că aveți Node. Deschideți linia de comandă și introduceți node -v. Dacă
vedeți versiunea nodejs, atunci totul este bine.

2.2 Instalarea npm

NPM este un manager de pachete Node.js, cu care puteți primi și instala pachete .Pentru a lucra cu
npm, trebuie doar să instalați Node.js, npm vine cu ea în cutie ca un bonus. Deci verificăm imediat
în consolă cu următoarea comandă

17
2.3 Instalarea Gulp

După instalarea Node.js , deschideți linia de comanda și tastați:

npm install este comanda utilizată de Node Package Manager pentru a instala Gulp pe computer.

Flagul –-global , precizează că Gulp trebuie să fie instalat pe computer la nivel global pentru a
fi utilizate oriunde în sistem.

2.4 Instalarea git

Git este un sistem de gestionare a versiunilor fișierelor dintr-un dosar (numit și folder sau director).
Altfel spus, un program care înregistrează fiecare modificare dintr-un dosar de-a lungul timpului,
astfel încât utilizatorii acelui dosar pot să se întoarcă în orice punct din istoria dosarului sau pot
analiza evoluția lui de-a lungul timpului. O funcție foarte importantă a Git este cea de „ramuri”, prin
care istoria unui dosar poate evolua concomitent în mod diferit în mai multe „ramuri” (create cu „git
checkout -b” sau cu „git branch”), și într-un moment ales acele ramuri pot fi unificate (cu comanda

18
„git merge”) Ceea ce face Git cu adevărat folositor este funcția de „remote”-uri, adică servere pe
care git încarcă întreaga istorie a unui dosar permițând colaborarea mai multor utilizatori asupra
aceluiași dosar. Exemple de servicii care folosesc Git pentru a permite colaborarea utilizatorilor
asupra unor proiecte sunt GitHub și BitBucket. GitHub este cel mai popular, dar BitBucket permite
crearea unui număr nelimitat de depozite Git private.

Pentru a instala Git în Windows, trebuie mai întâi să descărcați distribuția. Pentru a face acest lucru,
accesați https://git-scm.com/downloads

Dacă sistemul dvs de operare este (OS) Windows , pagina principală a site - ului va arata cam așa
cum se arată în imaginea de mai jos. Pentru alte sisteme de operare, diferența va fi că zona pentru
descărcarea distribuției se va schimba in dependenta de sistemul de operare.

Pentru a descărca Git, trebuie să faceți click pe butonul Downluad for Windows situat în partea
dreaptă a ferestrei.

Procesul de instalare ulterioară a lui Git arată astfel.

19
1. Rulați fișierul de instalare
2. Citiți, dacă doriți, cu acordul de licență și faceți clic pe butonul Următorul

3. Selectați componentele pe care doriți să le instalați

20
4. Indicați cum să utilizați Git

21
Există trei opțiuni posibile în această fereastră:

1. Utilizați Git numai din Git Bash

Variabila PATH nu este modificată și lucrul cu Git este posibilă numai printr-o programă
specializată numită Git Bash .

2. Utilizați Git din linia de comandă Windows

În acest caz, există o modificare minimă a variabilei de mediu este PATH , ceea ce va permite să
lucreze cu Git prin linia de comandă Windows . Lucrul prin Git Bash este de asemenea posibil.

3. Utilizați instrumentele Git și opțional Unix din Promptul de comandă Windows

Un număr semnificativ de modificări sunt făcute în variabila PATH , care permite utilizarea atât
a utilităților Git și Unix , care sunt furnizate cu distribuția Git , în cadrul liniei de comandă
Windows .

Recomandarea mea: Utilizați Git din opțiunea Windows Command Prompt .

5. Setarea regulilor de terminare a liniei

22
6. Selectarea emulatorului terminal pentru a fi utilizat cu Git Bash

23
Puteți alege dintre două opțiuni:

 Utilizați MinTTY (terminalul defaul al MSYS2)

Git Bash va folosi terminalul MinTTY ca emulator .

 Utilizați fereastra consolei implicite Windows

Git va folosi consola Windows (" cmd.exe ").

Recomandarea mea: Utilizați opțiunea MinTTY (terminalul defaul al MSYS2) .

24
7. Setarea parametrilor suplimentari

Recomandarea mea: Activați caching-ul sistemului de fișiere și activați Git Credential Manager .

8. Finalizați instalarea

25
După ce faceți clic pe butonul Instalare , Git va fi instalat pe Windows , după terminarea instalării,
utilizatorul va primi un mesaj corespunzător.

Finalizarea instalării Git

2.5 Instalarea bower

Bower este un manager de pachete care instalează pachetele necesare ale versiunii cerute împreună
cu dependențele acestora. Pur și simplu, Bower va face instalarea și actualizarea dependențelor de
proiect pentru tine, adică. bibliotecile din diferitete părți folosite în proiectul dvs. (de exemplu,
jQuery și tot ce utilizați, dar nu ați scris codul sursa).

Înainte de a începe să instalați umbrar, va trebui să instalați GIT, Node.js și NPM (instrucțiuni
despre cum se instalează Node.js și NPM aici: Cum se instalează Node.js și NPM pe Windows )

Dacă este setat totul, deschideți linia de comandă (consola) și executați comanda:

26
După ce comanda este executată cu succes, veți vedea ceva de genul:

Pentru test, vedem versiunea de bower, pentru aceasta, la linia de comandă, executați:

27
De îndata ce am instalat toate instrumentele necesare putem trece la partea practică care va fi
abordat in capitolul 3.

Capitolul III. Lucru cu gulp

Până acum am discutat generalități legate de automatizarea în JavaScript și am analizat diferiti

manageri de sarcini care există momentan. În continuare, vom detalia diferite procese care pot fi
automatizate, iar pentru a face acest lucru am ales Gulp ca manager de sarcini.

Instalarea sistemului Gulp

La fel ca toate celelalte sisteme prezentate anterior, avem nevoie de Node.js ca să putem instala și
rula gulp.

3.1 Definirea fișierului „package.json”

Orice aplicație Node.js are un fișier de configurare a sa, unde putem specifica detaliile aplicației, dar
și dependințele acesteia. Noi vom utiliza acest fișier doar pentru a defini dependințele pentru
development:

Să începem:

Creați un dosar pentru proiectul nostru, de exemplu "UST". Deschideți dosarul în linia de comanda
și executați:

npm init

28
Puteți apăsa pe Enter pe toate întrebările instalatorului, deoarece acum nu este important. În dosarul
cu proiectul, vom genera un fișier package.json, cu așa un conținut:

{
"name": "ust",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

După care va fi adaptat nevoilor noastre:

{
"name": "ust",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"dependencies": {
"gulp": "^3.8.11"
}
}

29
În blocul de dependențe am indicat că avem nevoie de gulp și vom înregistra imediat toate plug-in-
urile noastre.

Plug-in-uri:

gulp-autoprefixer - adaugă automat prefixuri pentru proprietățile CSS .

gulp-minify-css - este necesar pentru compresarea CSS.

browser-sync - cu ajutorul acestui plugin putem crea cu ușurință un server local , cu livereload,
precum și putem face un tunel la localhost nostru, pentru a arata partea front-end clientului

gulp-imagemin - pentru a comprima imagini

imagemin-pngquant - adăugiri la plug-in - anterior pentru a lucra cu PNG

gulp-uglify - va comprima nostru JS

gulp-less - pentru compilarea codului nostru LESS

gulp-sourcemaps - ia pentru a genera sourscemaps css, ceea ce ne va ajuta la depanarea codului

gulp-rigger - Plugin-ul vă permite să importați un fișier în altul cu o construcție simplă

//=footer.html

iar această linie va fi înlocuită atunci când fișierul se compileaza cu conținutul fișierului footer.html

gulp-watch - Va fi necesar pentru a monitoriza modificările fișierelor

rimraf - rm -rf pentru nod

gulp-notify – pentru a primi notificari referitor la lucru efectuat de pluginuri

30
Obținem la ieșire asa un package.json :

{
"name": "ust",
"version": "1.0.0",
"description": "Automatizarea in javascript manageri de sarcini",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"browser-sync": "^2.2.3",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-imagemin": "^2.2.1",
"gulp-minify-css": "^1.0.0",
"gulp-rigger": "^0.5.8",
"gulp-less": "^3.3.2",
"gulp-sourcemaps": "^1.5.0",
"gulp-uglify": "^1.1.0",
"gulp-watch": "^4.1.1",
"imagemin-pngquant": "^4.0.0",
"rimraf": "^2.3.1",
"gulp-notify": "^3.0.0"
},
"scripts": {
"test": "default"
},
"repository": {
"type": "git",
"url": "https://github.com/sinups/ust-teza/"
},
"author": "Andrei Cojocari",
"license": "ISC"
}

31
Mai multe detalii despre fișierul package.json și despre opțiunile care pot fi definite în interiorul lui,
puteți găsi pe site-ul oficial: www.npmjs.org/doc/json.html .

Apoi trebuie să rulăm comanda de instalare:

npm install

Această comandă va parcurge din nou toate dependințele specificate în fișierul package.json și va
instala toate pachetele care lipsesc sau care au o versiune mai veche decât cea specificată în fișier.

Se pot specifica oricâte pachete în fișierul package.json, care apoi să fie instalate deodată. Nu este
necesară instalarea individuală a fiecărui pachet.

Alternativ, se poate rula comanda următoare pentru instalarea unui pachet:

npm install nume plugin --save-dev

Utilizând parametrul „–save-dev„, pachetul se va adăuga și salva automat în fișierul package.json,

nemaifiind nevoie de editarea manuală a fișierului.

3.2 Definirea fișierului „bower.json”

Nu mă mai gândesc la munca mea fără managerul de pachete Bower. Săl adăugăm la proiectul
nostru. Pentru aceasta, executați următoarea comandă în consola:
32
Bower init

Puteți, de asemenea, să apasati enter la toate întrebările. În final, ajungem la un fișier bower.json:

{
"name": "ust",
"version": "0.0.0",
"authors": [
"Andrei Cojocari <webtheory@mail.ru>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

Și il modificam conform cerintelor:

33