Cum să utilizați Grunt pentru a vă automatiza fluxul de lucru [Tutoriale]

sunt o uriașul avocat al automatizării pentru că face viața mult mai simplă. De ce să vă petreceți timp pe sarcini menionale, monotone care vă suge forța de viață imediat când aveți un computer pentru a face lucruri pentru tine? Acest lucru este valabil mai ales pentru dezvoltarea web.

Multe sarcini de dezvoltare pot fi o corvoadă. În timp ce vă dezvoltați poate doriți să compilați codul, atunci când împingeți o versiune de dezvoltare, puteți concatena și minifia fișierele, eliminați resursele de dezvoltare numai și așa mai departe. Chiar și pe cele relativ necomplicate cum ar fi ștergerea unei mulțime de fișiere sau redenumirea de foldere poate lua o mare parte din timpul nostru.

În acest articol vă voi arăta cum vă puteți face viața mai ușoară prin folosirea excelentă a funcționalității oferită de Grunt, un alergător în sarcina Javascript. Vă voi îndruma în întregul proces, astfel încât să nu vă faceți griji, chiar dacă nu sunteți un vrăjitor Javascript!

Mai multe despre Hongkiat.com:

CSSMatic face ca CSS să devină mai ușor pentru proiectanții Web
Automatizarea sarcinilor în Mac cu acțiuni de foldere
Automatizați fișierele Dropbox cu acțiuni
10 aplicații pentru a ajuta la automatizarea Sarcini pe dispozitivul Android
Cum să faceți backup (automat) site-ul dvs. în Dropbox

Instalarea lui Grunt

Instalarea lui Grunt este destul de ușoară deoarece folosește managerul de pachete de noduri. Acest lucru înseamnă că ar putea fi necesar să instalați și Nodul însuși. Deschideți un terminal sau un prompt de comandă (voi apela acest terminal de acum încolo) și intrați nmp -v.

Dacă vedeți un număr de versiune pe care îl aveți NPM instalat, dacă vedeți o eroare de "comanda nu a fost găsită", va trebui să o instalați accesând pagina de descărcări a nodurilor și selectând versiunea de care aveți nevoie.

Odată ce nodul este instalat, obținerea lui Grunt este o chestiune de o singură comandă emisă în terminal:

npm instalare -g grunt-cli

Utilizare de bază

Veți folosi Grunt pe bază de proiect, deoarece fiecare proiect va avea cerințe diferite. Să începem acum un proiect, creând un dosar și navigând la el și prin terminalul nostru.

Două fișiere alcătuiesc inima lui Grunt: package.json și Gruntfile.js. Fișierul pachet definește toate dependențele de la terțe părți pe care le va utiliza automatizarea, Gruntfile vă permite să controlați Cum exact acestea sunt folosite. Să creăm acum un fișier pachet cu oase goale, cu următorul conținut:

"nume": "test-proiect", "versiune": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Numele și versiunea depinde de dvs., dependențele trebuie să conțină toate pachetele pe care le utilizați. În momentul de față nu facem nimic, așa că vom fi siguri că Grunt însuși este adăugat ca o dependență.

S-ar putea să vă întrebați ce înseamnă acea linie (~) numită "tilda"?.

Versiunile pot fi cerute folosind regulile din versiunea semantică pentru npm. Pe scurt:

Specificați o versiune exactă 4.5.2
Puteți utiliza mai mult decât / mai puțin decât pentru a indica versiunea minimă sau maximă, cum ar fi > 4.0.3
Folosind tilde specifică un bloc de versiune. Utilizarea ~ 1.2 este considerat a fi 1.2.x, orice versiune de mai sus 1.2.0 dar sub 1.3

Sunt disponibile mai multe moduri de specificare a versiunilor, dar acest lucru este suficient pentru majoritatea nevoilor. Următorul pas este crearea unui Gruntfile care va efectua automatizările noastre.

 modul.exports = funcția (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ("implicit", []); ;

Acesta este în esență scheletul pentru un Gruntfile; există două locuri de interes. O locație este în interiorul initConfig () funcţie. Aici merge toată configurația proiectului. Acest lucru va include lucruri cum ar fi manipularea LESS / SASS compilarea, scripturi minifying și așa mai departe.

A doua locație este sub această funcție în care specificați sarcini. Puteți vedea o sarcină specificată numită “Mod implicit”. Este gol în momentul de față, așa că nu face nimic, dar vom extinde mai târziu. Sarcini, în esență, coadă în bucăți și bucăți din configurația proiectului nostru și le execută.

De exemplu, o sarcină numită “script-uri” poate concatenate toate script-urile noastre, apoi minify fișierul rezultat și apoi mutați-l la locația finală. Aceste trei acțiuni sunt toate definite în configurația proiectului, dar sunt “trase împreună” de sarcină. Dacă acest lucru nu este clar tocmai nu vă faceți griji, vă voi arăta cum se face acest lucru.

Prima noastră sarcină

Să creăm o sarcină care minifică un singur fișier javascript pentru noi.

Există patru lucruri pe care trebuie să le facem în orice moment: dorim să adăugăm o nouă sarcină:

Instalați un plugin dacă este necesar
Solicitați-o în Gruntfile
Scrieți o sarcină
Adăugați-l la un grup de activități, dacă este necesar

(1) Găsiți și instalați pluginul

Cea mai ușoară modalitate de a găsi pluginul de care aveți nevoie este să tastați ceva similar în Google: “minify javascript grunt plugin”. Primul rezultat ar trebui să vă ducă la pluginul grunt-contrib-uglify, care este exact ceea ce avem nevoie.

Pagina Github vă spune tot ce trebuie să știți. Instalarea este o singură linie în terminal, iată ce trebuie să utilizați:

 npm instalare grunt-contrib-uglify - salvează-dev

Este posibil să fie nevoie să rulați acest lucru cu privilegiile admin. Dacă ai ceva de genul npm ERR! Încercați să rulați din nou această comandă ca root / Administrator. de-a lungul drumului doar tastați sudo înainte de comandă și introduceți parola atunci când vi se solicită:

 sudo npm instalare grunt-contrib-uglify --save-dev

Această comandă vă analizează de fapt package.json fișier și îl adaugă ca dependență acolo, nu va trebui să faceți acest lucru manual.

(2) Solicită în Gruntfile

Următorul pas este să adăugați în Gruntfile dvs. o cerință. Îmi place să adaug plugin-uri în partea de sus a fișierului, aici este Gruntfile mea completă după adăugare grunt.loadNpmTasks ( 'groh-contrib-sluți');.

 modul.exports = funcția (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ("implicit", []); ;

(3) Creați o sarcină pentru minifierea scripturilor

Așa cum am discutat, acest lucru ar trebui făcut în cadrul initConfig () funcţie. Pagina Github pentru plugin (și majoritatea pluginurilor) vă oferă o mulțime de informații și exemple. Iată ce am folosit în proiectul meu de testare.

 uglify: construiește: src: 'js / scripts.js', dest: 'js / scripts.min.js'

Acest lucru este destul de simplu, am specificat scripts.js fișierul din directorul JavaScript al proiectului meu și destinația fișierului miniat. Există multe modalități de a specifica fișierele sursă, vom examina mai târziu.

Pentru moment, să aruncăm o privire la Gruntfile completă după ce a fost adăugat, pentru a vă asigura că știți cum se potrivesc lucrurile.

 modul.exports = funcția (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ("implicit", []); ;

(4) Adăugați această configurație într-un grup de activități

Acum ai putea să te duci la terminalul tău și să tipi grunt uglify dar vom avea nevoie de grupuri de sarcini pentru a executa mai multe sarcini mai târziu. Avem sarcina implicită goală, așteptând ca ceva să fie adăugat, deci să-l modificăm după cum urmează:

 grunt.registerTask ("implicit", [uglify]);

În acest stadiu ar trebui să puteți merge la terminal, tastați mormăit și vezi minifierea să aibă loc. Nu uitați să creați a scripts.js fișier desigur!

Asta nu a luat prea mult timp pentru a înființa o face? Chiar daca esti nou la toate astea si ti-a luat ceva timp sa treci prin pasi, timpul pe care-l economiseste va depasi timpul petrecut pe el in cateva utilizari.

Concatenarea fișierelor

Să ne uităm la fișierele de concatenare și aflați cum să specificați mai multe fișiere ca țintă pe parcurs.

Concatenarea este procesul de combinare a conținutului mai multor fișiere într-un singur fișier. Avem nevoie de pluginul grunt-contrib-concat. Să facem pașii:

Pentru a instala pluginul utilizați npm instalează grunt-contrib-concat -save-dev în terminal. După ce ați terminat, asigurați-vă că îl adăugați la Gruntfile exact ca înainte grunt.loadNpmTasks ( 'groh-contrib-concat');.

Următorul este configurația. Să combinăm trei fișiere specifice, sintaxa va fi familiară.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js' ,,

Codul de mai sus ia cele trei fișiere date ca sursă și le combină în fișierul dat ca destinație.

Acest lucru este deja destul de puternic, dar ce se întâmplă dacă se adaugă un fișier nou? Trebuie să ne întoarcem tot timpul? Desigur că nu, putem specifica un întreg dosar de fișiere pentru a concatenate.

 conc: dist: src: 'dev / js / * .js'], dest: 'js / scripts.js',,,

Acum, orice fișier javascript din directorul dev / js va fi îmbinat într-un fișier mare: js / scripts.js, mult mai bine!

Acum este momentul să creați o sarcină, astfel încât să putem concatena anumite fișiere.

 grunt.registerTask ("mergejs", ['concat']);

Aceasta nu este sarcina implicită, deci va trebui să introducem numele în terminal atunci când emitem mormăit comanda.

 grunt mergejs

Automatizarea automatizării

Am făcut deja multe progrese, dar mai sunt multe! Pentru moment, când doriți să concatenați sau să micșorați, trebuie să mergeți la terminal și să tastați comanda corespunzătoare. Este timpul să aruncăm o privire la ceas care va face asta pentru noi. De asemenea, vom învăța cum să executați simultan sarcini mulitple, de-a lungul drumului.

Pentru a merge mai departe, va trebui să luăm ceasul. Sunt sigur că puteți să-l instalați și să-l adăugați la Gruntfile pe yuor proprii până acum, așa că voi începe prin a vă arăta ce folosesc în proiectul meu de testare.

 ceas: scripts: fișiere: ['dev / js / * .js'], sarcini: ['concat', 'uglify'],,

Am numit un set de fișiere de urmărit “script-uri”, așa că știu ce face. În acest obiect am specificat fișierele de urmărit și sarcini de rulat. În exemplul anterior de concatenare am tras împreună toate fișierele din directorul dev / js.

În exemplul de minime, am miniat acest fișier. Este logic să urmăriți directorul dev / js pentru modificări și să executați aceste sarcini ori de câte ori există.

După cum puteți vedea, mai multe sarcini pot fi numite cu ușurință prin separarea lor cu virgule. Ele vor fi executate în ordine, mai întâi concatenarea, apoi minificarea în acest caz. Acest lucru se poate face, de asemenea, cu grupurile de sarcini, care sunt de ce există.

Acum putem modifica sarcina noastră implicită:

 grunt.registerTask ("implicit", [concat "," uglify "]);

Acum avem două alegeri. Ori de câte ori doriți să vă concatenați și să micșorați scripturile dvs. puteți comuta la terminal și tastați mormăit. De asemenea, puteți utiliza comanda de vizionare pentru a iniția vizionarea fișierelor: Ceas de mână.

Va sta acolo, așteptând să modificați aceste fișiere. Odată ce ați făcut, va îndeplini toate sarcinile atribuite, mergeți mai departe, faceți o încercare.

Asta e mult mai bine, nici o intrare nu este necesară de la noi. Acum puteți lucra cu fișierele și totul va fi bine făcut pentru dvs..

Prezentare generală

Cu această cunoaștere rudimentară a modului în care pot fi instalate și utilizate pluginurile și cum funcționează comanda de ceas, sunteți cu toții pregătiți să deveniți un dependent de automatizare. Există mult mai multe despre Grunt decât despre ceea ce am discutat, dar nimic pe care nu-l puteți rezolva singur.

Utilizarea comenzilor pentru compilarea SASS, optimizarea imaginilor, autoprefixarea și multe altele este doar o chestiune de urmărire a pașilor discutabili și citirea sintaxei pe care pluginul o cere.

Dacă știți despre unele utilizări deosebite pentru Grunt, vă rugăm să ne spuneți în comentarii, suntem întotdeauna interesați să auziți cum folosiți instrumente cum ar fi Grunt!