Share
În prima parte a acestei serii am făcut o scurtă trecere în revistă a lui Grunt. Am vorbit, de asemenea, prin diferitele tehnologii pe care le cere pentru a le folosi. După asta, am ajuns puțin în Gruntfile și sarcinile din interiorul lui.
Acum vreau să vorbesc despre modul în care Grunt poate îmbunătăți dezvoltarea dvs. pentru ambele teme și pluginuri WordPress.
Partea mea preferată cu privire la utilizarea Grunt și npm este că, pe măsură ce vă configurați proiectul, se auto-documentează dependențele proiectului dumneavoastră. Acest lucru este minunat pentru echipele de dezvoltare și pentru proiectele cu sursă deschisă. Cine vrea să scrie documentația cu privire la modul de configurare a unui spațiu de lucru oricum, corect?
În primul rând, va trebui să aveți un fișier package.json în proiectul dvs. Va trebui să aveți setat numele, versiunea și descrierea proiectului. Vom face mai multe detalii în legătură cu aceasta în următoarea postare, dar iată un exemplu:
"nume": "nume de proiect",
"versiune": "1.0.0",
"description": "Proiect minunat"
Odată ce ați instalat acest lucru, atunci când instalați un plug-in grunt, trebuie doar să îl adăugați --salvați-dev până la sfârșit și va adăuga plugin-ul la fișierul package.json sub devDependencies. De exemplu, dacă aș vrea să adaug mormăit-contrib-ceas plugin pentru proiectul meu Mi-ar rula următoarea comandă:
npm instalează grunt-contrib-watch -save-dev
Veți vedea pluginul adăugat la dvs. node_modules și ar trebui să aibă ca rezultat și fișierul package.json să arate astfel:
"nume": "nume de proiect",
"versiune": "1.0.0",
"description": "Proiect minunat", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Pe măsură ce instalați alte pluginuri Grunt și adăugați --salvați-dev până la sfârșit, le veți vedea adăugate sub devDependencies obiect.
De ce este aceasta benefică? Asa cum am spus mai devreme, aceasta este auto-documentarea dependentelor de proiecte. Odată ce ați instalat toate pluginurile și le-ați adăugat în fișierul package.json, acum puteți rula un alt membru al echipei sau contribuitor npm install și vor instala tot ceea ce este necesar pentru proiect.
Puteți testa acest lucru destul de ușor prin ștergerea întregii dvs. node_modules dosar și de funcționare npm install tu. Veți vedea tot ce instalați instalat automat.
[notă] Veți dori să adăugați node_modules dosarul dvs. .gitignore astfel încât să nu vă bloat depozitul. [/ note]
Folosesc multe pluginuri asemănătoare Grunt cu fiecare proiect, dar cel pe care îl instalez mereu este cel pe care l-am referit anterior, grunt-contrib-watch. Acest plugin, atunci când este executat, va urmări fișierele proiectului dvs. și va începe toate sarcinile pe care le-ați specificat pentru acel fișier sau tip de fișier.
Un exemplu ar fi pentru oricare dintre fișierele dvs. JavaScript. Când faceți modificări la unul dintre ele și salvați-l, atunci puteți avea Grunt să execute o sarcină JSLint, concat și minify. Puteți specifica și o comandă, astfel încât, atunci când reușiți, următorul lucru este dat. Dacă unul nu reușește, atunci acesta ucide întreaga secvență de sarcini.
CodeKit are o caracteristică similară, dar execută toate sarcinile. De exemplu, dacă efectuați o modificare a unui fișier SASS sau LESS, nu numai că pornește acele sarcini, dar, de asemenea, începe și sarcinile de fișiere JavaScript. Sarcina Grunt watch vă oferă mai mult control asupra sarcinilor care se execută atunci când sunt modificate anumite fișiere sau tipuri de fișiere.
Împreună cu sarcinile Grunt pentru pluginurile pe care le instalați, puteți crea propriile sarcini personalizate. De multe ori când am creat un proiect, am 3 sarcini pe care le configurez, Mod implicit, înființat, și construi.
Sarcina implicită este sarcina care se va executa cu executarea dvs. mormăit din linia de comandă. De multe ori îmi voi încadra sarcina de urmărire. Puteți adăuga oricare sarcină pe care doriți să o derulați.
Sarcina de configurare pe care o configurez de obicei face lucrurile care trebuie doar să se întâmple pentru prima dată când setați configurarea proiectului. De multe ori folosesc Bower pentru a încărca biblioteci terțe părți ca Bootstrap și trebuie să le trag pe acestea apoi să execută o operație de copiere pentru a mișca unele fișiere în proiectul meu și apoi a da startul unei compilații inițiale a fișierelor LESS și JavaScript.
Sarcina de construire este folosită pentru lucrurile necesare înainte de a vă elibera sau distribui proiectul. Întotdeauna rulez acest lucru pentru a vă asigura că totul este concatenat, minificat și comprimat. Un exemplu excelent este să rulați grunt-contrib-imagemin pentru a optimiza toate imaginile din proiectul dvs. Un alt exemplu este folosirea grunt-contrib-compress pentru a crea un fișier zip al temei, astfel încât să fie ușor de instalat prin intermediul administratorului WordPress.
Grunt este cu siguranță un instrument excelent pentru echipele de dezvoltatori. De la documentarea automată a dependențelor de proiect la construirea personalizatelor, Grunt vă face eficiente. Utilizați Grunt pentru a automatiza diferite sarcini în proiectul dvs., astfel încât să vă puteți concentra pe construirea temei sau pluginului dvs. WordPress.
Accentsconagua