Noțiuni introductive cu Grunt, WebReference
- parsarea fișierelor JS;
- minimizarea fișierelor JS;
- compilarea de fișiere Less;
- minimizarea fișierelor CSS;
- urmăriți modificările aduse fișierelor și efectuați sarcinile de mai sus.
O privire rapidă la Grunt în acțiune
Utilizarea Grunt este destul de ușoară. Doar instalați-l și apoi executați sarcina dorită. Gruntva face sarcina pentru tine. Acesta este ceea ce site-ul oficial Grunt numește sarcini de rulare.
Fă totul super ușor
Există multe tutoriale care vorbesc despre lucrurile uimitoare pe care le poți face cu Grunt. Acestea sunt tutoriale bune, dar uneori pot deruta oamenii care abia încep cu Grunt cu setări mari.Acesta este, de asemenea, un ghid pentru elementele de bază ale Grunt și crearea sarcinilor incredibil de simple și ușor de personalizat menționate mai sus. Vă va învăța elementele de bază, dar vă va lăsa să vă întrebați cum putem extinde Grunt pentru aplicații avansate în viitor.
Noțiuni de bază
Pentru a folosi Grunt, avem nevoie de Node.js deja instalat. Nu vă faceți griji, puteți utiliza Grunt în orice aplicație doriți, fie că este o aplicație Node, o aplicație PHP, WordPress sau pur și simplu vechi HTML/CSS/JS. Node și managerul său de pachete (npm) sunt folosite pentru a obține pachetele necesare. Fiecare pachet își îndeplinește propria funcție, cum ar fi minimizarea sau analiza. Dacă nu aveți deja instalat Node pe computer, luați-l și vom începe cu Grunt. Pentru a vă asigura că aveți instalate Node și npm, accesați linia de comandă și tastați node -v și npm -v . Dacă vedeți numere de versiune, înseamnă că sunteți gata de plecare!
Fișierele noastre de proiect sunt stocate destul de simplu. Iată structura fișierului pentru exemple,prezentat mai jos. Începeți prin a crea foldere și fișiere, dar lăsați fișierele goale pentru moment, le vom popula mai târziu.
Observați folderelesrc șidist. Toate fișierele noastre de lucru sunt stocate în folderulsrc, apoi Grunt minimizează aceste fișiere și le salvează în folderuldist. Fișierele din acest folder sunt pentru a fi utilizate în site-ul final.
Obținerea pachetelor necesare pentru Grunt
Când folosim npm, definim toate pachetele de care avem nevoie în fișierul package.json. Să navigăm la acest fișier și să adăugăm pachetele necesare la el. Ce face fiecare pachet va fi explicat mai târziu.
Aici am definit numele proiectului nostru prin nume, versiunea acestuia (versiunea) și pachetele necesare (devDependencies). La prima vedere, pare misterios, mai ales pentru cineva care nu a mai lucrat cu Node și npm înainte, dar în curând vă veți da seama că npm este un manager de pachete foarte cool pentru un proiect.
Pachete Grunt
Vei fi surprins să știi ce fac toate aceste pachete grunt-contrib-****. Iată pachetele populare rezumate în tabel.
Pentru o listă completă a pachetelor, vizitați depozitul de plugin Grunt. Acum că am identificat pachetele de care avem nevoie, să le instalăm.
Instalarea pachetelor
După pregătirea fișierului package.json, accesați linia de comandă și tastați:
Veți vedea că npm își face treaba și trage aceste pachete în folderul nou creatnode_modules. Acum avem aceste pachete și sunt gata pentru a fi utilizate în proiect. Instalarea este completă, așa că să trecem la configurarea sarcinilor pentru Grunt!