Share
Dacă lucrați la un proiect mare, veți avea, fără îndoială, un script de construire sau o grămadă de scripturi de sarcină pentru a vă ajuta cu unele părți repetate ale procesului. Este posibil să utilizați Ant sau Rake, în funcție de limba în care este scris proiectul.
Dar ce folosiți dacă proiectul este în primul rând JavaScript? Aceasta este problema pe care Ben Alman a pornit-o să o rezolve când a creat Grunt.
Ce este Grunt? Ei bine, spune README despre Github
Grunt este un instrument de construire a liniei de comandă bazate pe sarcini pentru proiectele JavaScript.
Iată ideea: atunci când lucrați la un proiect JavaScript, există o grămadă de lucruri pe care veți dori să le faceți în mod regulat. Ca de ce, întrebi? Ei bine, cum ar fi concatenarea fișierelor date, executarea JSHint pe codul dvs., rularea testelor sau minificarea scripturilor. Dacă vă inserați JavaScript în JSHint online, probabil că realizați că există o modalitate mai bună de a face acest lucru; chiar dacă utilizați pisică pentru a concatena fișiere sau un minifier de linie de comandă, ar fi bine să aveți un singur set unic de comenzi pentru toate acele sarcini suplimentare, care au funcționat pentru fiecare proiect JavaScript, corect?
Asta vrea Grunt să fie. Are o grămadă de sarcini încorporate, care vă vor aduce destul de departe, cu capacitatea de a vă crea propriile pluginuri și scripturi care extind funcționalitatea de bază.
Pentru mai multă bunătate a lui Grunt, vezi postarea lui Ben pe blogul său personal și pe blogul Bocoup.
Grunt este construit pe Node.js și este disponibil ca pachet prin managerul de pachete Node (npm). Veți dori să o instalați la nivel global, deci utilizați această comandă:
npm install -g grunt
Veți observa că instalează câteva dependențe; există alte pachete npm pe care Grunt le folosește. Odată ce ați terminat, sunteți gata să plecați!
După cum știți, Grunt este un instrument de linie de comandă; așadar, presupun că aveți o fereastră terminală deschisă pentru restul tutorialului.
Să începem prin crearea unui director de proiect; nu vom construi un proiect aici, dar vom vedea cum lucrează Grunt în acest director. Odată ce vă aflați în acel director, rulați mormăit (în conformitate cu documentația, dacă sunteți pe Windows, este posibil să fie necesar să rulați grunt.cmd). Probabil veți vedea ceva de genul:
Imposibil de găsit fișierul de configurare "grunt.js". Aveți nevoie de ajutor?
Înainte de a putea profita cu adevărat de Grunt la potențialul său maxim, veți avea nevoie de a grunt.js fișier în directorul de proiect. Din fericire, Grunt poate genera automat o grunt.js fișier și alte materiale schelet de proiect - cu init sarcină, care poate funcționa fără a grunt.js fișier în loc. Dar grunt init încă nu este suficient pentru a începe proiectul, așa cum veți vedea dacă îl executați. Trebuie să alegeți un tip de proiect de generat. Alergare grunt init vă va oferi o listă de tipuri de proiecte pentru a alege:
Accentsconagua
jquery: Un plugin jQuerynodul: Un modul Nodcommonjs: Un modul CommonJSgruntplugin: Un plugin Gruntgruntfile: Un Gruntfile (grunt.js)Dacă proiectul dvs. nu se potrivește cu nici unul dintre primele patru tipuri de proiecte, puteți folosi unul final: gruntfile: creează doar o bază grunt.js pe care le puteți completa. Deci, haideți să încercăm, cu șablonul de plugin jQuery. Alerga grunt init: jquery în terminalul tău.
Veți observa o mulțime de ieșiri inițiale. Dacă vă faceți timp să citiți notele șablonului, veți vedea că va trebui să completați câteva valori, cum ar fi numele proiectului și titlul proiectului. De fapt, după acea notă, veți vedea ceva de genul:
Răspundeți la următoarele: [?] Numele proiectului (jquery.demo)
Ori de câte ori inițializați un proiect, Grunt vă va întreba o serie de întrebări, astfel încât să puteți completa câteva opțiuni. Această valoare în paranteze? Aceasta este sugestia implicită, bazată pe tipul de proiect și pe numele directorului de proiect. Dacă doriți să o modificați, scrieți propriul nume de proiect la sfârșitul liniei și apăsați "enter"; în caz contrar, apăsați "enter" pentru a utiliza numele implicit.
Continuați și completați restul câmpurilor. Pentru un proiect de plugin jQuery, iată ce altceva veți avea nevoie să îl dați:
Multe dintre acestea au valori implicite; dacă doriți să utilizați valoarea implicită, apăsați butonul Enter pentru acea linie; pentru a lăsa câmpul gol, puteți să tastați "none". Odată ce ați trecut prin toate opțiunile, veți vedea că Grunt creează câteva fișiere de proiect de bază. Precum ce? Asa:
LICENȚĂ-GPL LICENȚĂ-MIT README.md grunt.js libs | - jquery | | - jquery.js | - qunit | - qunit.css | - qunit.js package.json src | - jquery.demo.js test | - jquery.demo.html | - jquery.demo_test. js
După cum puteți vedea, acest lucru ne oferă un început bun: nu numai că avem fișierul plugin (src / jquery.demo.js), avem, de asemenea, teste Qunit (testare / jquery.demo_test.js). Iar acestea nu sunt dosare goale. Au un conținut inițial, cu un plug-in jQuery atât de super-bază și teste unitare. Continuați și verificați conținutul acestor fișiere, veți vedea ce vreau să spun.
Grunt face mai mult decât să înființeze proiectul pentru tine.
Bineînțeles, Grunt face mai mult decât să înființeze proiectul pentru tine. În special, proiectul nostru are acum grunt.js: un fișier de configurare specific proiectului; din cauza opțiunilor pe care le stabilește, acum putem folosi celelalte sarcini încorporate ale lui Grunt. În curând o vom deschide și vom face unele ajustări, dar pentru moment să facem niște sarcini.
Dacă alergi mormăit fără opțiuni acum, vom executa sarcina implicită, dacă a fost setată. În cazul unui proiect plugin jQuery, este echivalent cu executarea acestor patru comenzi:
mănâncă grunt: verifică JavaScript împotriva lui JSHintgrunt qunit: execută testele Qunitgrunt concat: concatenate fișierele de proiect împreună și pune noul fișier într-un dist pliantgrunt min: micifiază fișierul concat scoate.Ar trebui să notez ceva despre testele Qunit aici: Testele Qunit sunt menite să ruleze în browser în mod implicit; doar deschis Teste / jquery.demo.html (sau echivalentul dvs.) în browser. Însă grunt qunit testul dorește să le execute pe terminal, ceea ce înseamnă că trebuie să aveți instalat PhantomJS. Nu este dificil: trebuie doar să mergeți la phantomjs.org și să descărcați și să instalați ultima versiune. Dacă Grunt poate găsi asta în calea ta, va putea să ruleze testele Qunit de la terminal.
Deci, alergând mormăit ar trebui să vă dau rezultate similare cu acestea:
După cum puteți vedea, fiecare dintre cele patru sarcini ale noastre a trecut. Dacă oricare dintre ele ar eșua, restul sarcinilor ar fi anulat (dacă nu îl sunați pe Grunt cu --forta steag).
Deja, am obținut o mulțime de funcționalități extraordinare din Grunt, folosind-o exact așa cum vine. Cu toate acestea, hai să deschidem asta grunt.js fișier și faceți unele configurări.
Interior grunt.js, veți vedea că toate configurarea se face prin trecerea unui obiect literal grunt.initConfig (). Să ne uităm la câteva proprietăți ale obiectului config.
PKGAceastă proprietate indică package.json fișier pe care Grunt la creat în directorul nostru de proiect. Având un package.json fișierul face parte din spec. CommonJs Packages; este un singur loc în care pot fi stocate majoritatea metadatelor despre proiect (nume, versiune, pagina de pornire, linkul repository ... multe dintre valorile pe care le-ați setat la inițierea proiectului). Totuși, asta PKG proprietatea nu indică mai mult decât fișierul pachet: notați sintaxa: '. Aceasta este una dintre directivele încorporate ale lui Grunt: de fapt, încarcă fișierul JSON, astfel încât Grunt (sau tu) să poată accesa toate proprietățile din fișierul package.json de la PKG proprietate.
meta meta proprietatea este un obiect cu o singură proprietate: un banner. Acest banner este un comentariu care se află în partea de sus a fișierelor de proiect concatenate sau minificate. După cum puteți vedea, este un șir cu unele etichete șablon (<%= %>); în majoritatea cazurilor, etichetele înconjoară un apel către o proprietate pe PKG proprietate, cum ar fi pkg.title. Cu toate acestea, puteți executa și funcții din interiorul acelor tag-uri: utilizarea grunt.template.today () și _.pluck () ne arată asta.
concat / min / qunit / puf / ceas Am grupat următoarele cinci proprietăți împreună pentru că sunt foarte asemănătoare. Toate acestea au setat opțiuni pentru sarcini specifice, sarcinile pe care le poartă numele. Când configurați aceste sarcini, este important să rețineți că Grunt a distins între două tipuri de sarcini: sarcini regulate și mai multe sarcini. Practic, diferența este că sarcinile obișnuite au doar un singur set de opțiuni de configurare, în timp ce multitasking-urile pot avea mai multe seturi de instrucțiuni (numite obiective). Dintre cele cinci sarcini pe care le-am enumerat în antetul acestei secțiuni, singura care nu este o multitasc este ceas.
Observați că în obiectul nostru config, qunit și puf proprietățile sunt ambele obiecte cu fișiere proprietate. fișiere este o singură țintă pentru această sarcină. În ambele cazuri, acestea reprezintă o serie de fișiere care vor fi utilizate la executarea acestei sarcini. Să presupunem că vreau să pot linge doar fișierele din src sub-director. Aș putea adăuga o altă țintă, astfel încât puf proprietate ar arata astfel:
scuipă: fișiere: ['grunt.js', 'src / ** / *. js', 'test / ** / *. js'], src: ['src / ** / *.,
Acum, să nu lăsați numai fișierele în src, alerg rochia de scame: src: Trec numele de destinație după un colon. Dacă alerg numai mănâncă grunt, ambele obiective vor fi executate.
În cazul concat și min sarcini, obiectivele sunt mai complicate: ele sunt obiecte cu sursă (src) și destinație (dest) proprietăți. Bineînțeles, acest lucru îi spune lui Grunt unde să obțină fișierele și unde să le pună atunci când se termină prelucrarea lor, respectiv. Dacă adăugați alte fișiere în proiectul dvs., veți dori să le adăugați în locul potrivit pentru a vă asigura că sunt concatenate și minificate corect. Deci, dacă am adăugat o src / utils.js fișier pe care pluginul meu de jQuery depindea, aș schimba concat.dist.src la acest:
