Share
În primul post din această serie am dat o privire de ansamblu rapidă despre Grunt și în următoarea post am să vă parcurg pașii necesari cu privire la modul în care Grunt vă poate îmbunătăți abilitățile de dezvoltare WordPress.
Mai precis, vom vorbi în detaliu despre fișierele necesare package.json și Gruntfile.js, dar pentru moment vom crea câteva exemple de fișiere, astfel încât să puteți rula Grunt cu tema WordPress sau proiectul de plugin.
Înainte de a începe, vă recomandăm să examinați conținutul menționat în primul articol din această serie.
Odată ce ați fost prinși, reveniți la acest articol și vom începe să creăm fișierele noastre de proiect. Acest lucru ne va oferi în cele din urmă o imagine de ansamblu asupra a ceea ce pare să aibă Grunt configurat pentru un anumit proiect.
În următorul articol, vom examina cum să facem acest lucru în mod special pentru WordPress, dar ne vom concentra acum pe o abordare mai generică.
Primul lucru pe care îl vom face este crearea unui package.json fișier din rădăcina proiectului. În interiorul acelui fișier nou, adăugați următoarele:
"nume": "nume de proiect", "versiune": "1.0.0", "descriere": "Proiect minunat"
Nu este nevoie să adăugați devDependencies obiect, deoarece acesta va fi adăugat automat atunci când vom instala sarcinile Grunt prin linia de comandă.
Pentru a instala sarcinile Grunt, trebuie să comutați la instrumentul liniei de comandă de alegere. Dacă sunteți pe un Mac, acesta ar fi Terminal sau iTerm. Dacă sunteți pe un PC, atunci aș sugera utilizarea PowerShell.
Mai întâi navigați la proiectul dvs. rădăcină ("CD-ul de dezvoltare-folder / project-folder"). Apoi vom instala o sarcină pentru a compila mai puține fișiere. Vom instala sarcina grunt-contrib-less, astfel că tastați următoarele în linia de comandă și apăsați introduce:
npm instalează grunt-contrib-less -save-dev
Veți începe să vedeți o serie de linii imprimate ca sarcină și toate dependențele sale sunt descărcate de la npm. Odată ce ați terminat, ar trebui să vedeți ceva de genul:
Acum ar trebui să puteți merge la dvs. package.json fișier și vezi mormăit-contrib-mai puțin adăugat la dvs. 'devDependencies' obiect, de asemenea. De asemenea, veți adăuga numărul versiunii de lângă nume. Aș putea vorbi despre notația de versiune într-un alt post întreg, dar pentru moment, știți că tildă se referă la versiunea cu care lucrăm în prezent.
În acest moment, ar trebui să vedeți următoarele:
"nume": "proiect-nume", "versiune": "1.0.0", "descriere": "Proiect minunat", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
În continuare, să adăugăm o sarcină pentru a urmări schimbările în cadrul nostru '.Mai puțin' fișiere. Vom folosi sarcina grunt-contrib-watch. Întoarceți-vă la linia de comandă și loviți-o introduce:
npm instalează grunt-contrib-watch -save-dev
Din nou, ar trebui să vedeți o ieșire pe ecran și, odată completată, va fi adăugată la dvs. package.json fişier. Acum ar trebui să pară așa:
"name": "nume de proiect", "versiune": "1.0.0", "descriere": "Proiect minunat", "devDependencies": "grunt-contrib-less": "~ 0.9.0"; "grunt-contrib-watch": "~ 0.5.3"
Sperăm că acum obțineți atârnă de ea și puteți folosi același proces pentru a adăuga alte sarcini Grunt. Doar un memento pentru a adăuga mereu 'Parametrul --save-dev'.
Acum, când avem câteva sarcini Grunt instalate, să începem să le folosim. Primul lucru pe care trebuie să-l facem este să creați o Gruntfile.js în dosarul rădăcină al proiectului nostru. Aici vom preciza sarcinile noastre și le vom configura.
Pentru a face acest lucru, adăugați următoarele la fișier:
modul.exports = funcție (grunt)
Primul lucru pe care trebuie să-l facem este încărcarea sarcinilor noastre, astfel încât să le putem executa. Faceți acest lucru adăugând folosind loadNpmTasks funcție pentru fiecare sarcină. Vă rugăm să adăugați următoarele în acolade:
grunt.loadNpmTasks ( 'groh-contrib mai puțin');grunt.loadNpmTasks ( 'groh-contrib-ceas');
Următorul lucru pe care trebuie să-l facem este să configurați configurația pentru sarcinile Grunt instalate. Trebuie să folosim initConfig funcționează astfel:
grunt.initConfig (pkg: grunt.file.readJSON ("pachetul.json"),);
Acum, după virgulă, vom adăuga configurația noastră pentru fiecare sarcină instalată. Veți găsi de obicei exemple de configurare a fiecărei sarcini în README.md fișier în proiectul GitHub. Fiecare sarcină va avea diferite opțiuni de configurare, deci asigurați-vă că ați verificat mai întâi documentația.
Prima sarcină pe care o vom configura este mormăit-contrib-mai puțin sarcină. Aceasta ne va compila .Mai puțin fișiere în .css fișiere pentru noi. Veți dori să creați un nou dosar pentru dvs. .Mai puțin fișiere și să creați unul nou. De obicei, creez un css / mai puțin dosarul și a pus toate meu .Mai puțin fișiere acolo.
Mergeți mai departe și adăugați un nou fișier numit style.less și adăugați un cod în el ca atare:
a culoare: albastru; &: hover culoare: roșu;
Acum, să ne întoarcem la noi Gruntfile.js fișier și adăugați următoarele:
Mai puțin:
Opțiuni:
căi: "css / less",
yuicompress: adevărat
,
fișiere:
'style.css': 'css / less / style.less'
Odată ce ați salvat fișierul, ar trebui să puteți să vă întoarceți la linia de comandă și să tastați grunt mai puțin și lovit introduce. Acest lucru va da naștere la sarcină și ne va compila .Mai puțin fișier și creați un nou style.css fișier în proiectul nostru rădăcină.
Acum că avem o sarcină pentru compilarea noastră .Mai puțin fișiere, să adăugăm o sarcină de vizionare pentru aceasta. Cine vrea să meargă la linia de comandă și să alerge grunt mai puțin de fiecare dată după ce facem modificări într-un fișier, corect?
După configurația anterioară, adăugați o virgulă după cum urmează:
ceas:
Mai puțin:
fișiere: "css / less / *. less",
sarcinile: "mai puțin"
După ce salvați fișierul, întoarceți-vă la linia de comandă și introduceți-l Ceasul de grunt. Acest lucru ar trebui să vadă următoarele:
Aceasta înseamnă că ceasul Grunt așteaptă modificări ale unuia dintre fișierele specificate în configurația dvs. Du-te la tine style.less fișier și efectuați o astfel de modificare:
a culoare: albastru; &: hover culoare: verde;
După ce salvați fișierul, sarcina de urmărire va începe și se va compila .Mai puțin fișiere în dvs. style.css fişier. După finalizare, va continua să urmărească aceste fișiere și va fi gata pentru o altă schimbare.
Din moment ce rulează, tot ce trebuie să faceți acum este să faceți o modificare într-un fișier, să îl salvați, apoi să treceți în browser-ul dvs. pentru a vedea modificările.
Acum avem totul pentru a folosi Grunt cu următorul proiect. A fost o instalare destul de simplă și sunt sigur că puteți vedea toate sarcinile posibile pe care le puteți avea în proiectul dvs. Mai târziu, în serie, am de gând să acoperim mai multe caracteristici avansate cu Grunt cum ar fi sarcini personalizate, configurații imbricate și alte bunătăți.
Dar, mai întâi, vom examina cum să încorporăm acest lucru în proiectele noastre WordPress.
Accentsconagua