Kako koristiti Grunt automatizirati vaš tijek rada [Tutoriali]

Ja sam veliki zagovornik automatizacije zato što život čini mnogo jednostavnijim. Zašto provoditi vrijeme na prljavim, monotonim zadacima koji isisavaju vašu životnu snagu kada imate računalo koje će vam raditi stvari? To posebno vrijedi za web razvoj.

Mnogi razvojni zadaci mogu biti zadatak. Tijekom razvoja možda ćete htjeti kompajlirati kod, pri pokretanju razvojne verzije možete spojiti i minificirati datoteke, ukloniti samo resurse za razvoj i tako dalje. Čak i relativno jednostavni poput brisanja hrpe datoteka ili preimenovanja mapa može zauzeti veliki komad našeg vremena.

U ovom članku ću vam pokazati kako možete olakšati život tako što ćete iskoristiti izvrsnu funkcionalnost koju nudi Grunt, JavaScript runner zadataka. Vodit ću vas kroz cijeli proces tako da ne morate brinuti čak ni ako niste čarobnjak za Javascript!

Više na Hongkiat.com:

CSSMatic čini CSS jednostavnim za web dizajnere
Automatiziranje zadataka u Macu s mapama
Automatizirajte svoje Dropbox datoteke s radnjama
10 aplikacija koje pomažu automatizirati zadatke na uređaju Android
Kako (automatski) izraditi sigurnosnu kopiju vaše web stranice u Dropbox

Instaliranje Grunta

Instaliranje Grunta je prilično jednostavno jer koristi upravitelja paketima čvorova. To znači da ćete možda morati instalirati i sam čvor. Otvorite terminal ili naredbeni redak (od sada ću nazivati ovaj terminal) i unesite nmp -v.

Ako vidite broj verzije koju imate NPM instaliran, ako vidite pogrešku "naredba nije pronađena", morat ćete je instalirati tako da odete na stranicu za preuzimanje čvora i odaberete verziju koja vam je potrebna.

Nakon instalacije Node, dobivanje Grunta je stvar jedne naredbe izdane u terminalu:

npm instalacija -g grunt-cli

Osnovna upotreba

Grunt ćete koristiti na projektu od projekta do projekta jer će svaki projekt imati različite zahtjeve. Počnimo sada projekt kreiranjem mape i navigacijom do njega preko našeg terminala.

Dvije datoteke čine srce Grunta: package.json i Gruntfile.js. Paketna datoteka definira sve ovisnosti treće strane koje će automatizacija koristiti, Gruntfile vam omogućuje kontrolu kako upravo se to koristi. Kreiramo sada paketnu datoteku golih kostiju sa sljedećim sadržajem:

"name": "test-projekt", "verzija": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Ime i verzija ovise o vama, ovisnosti moraju sadržavati sve pakete koje koristite. U ovom trenutku ne radimo ništa pa ćemo se pobrinuti da se i sam Grunt doda kao ovisnost.

Vi svibanj se pitate što je to squiggly linija (~) zove tilde radi tamo.

Verzije mogu biti potrebne pomoću pravila iz semantičke verzije za npm. U suštini:

Navedete točnu verziju 4.5.2
Možete upotrijebiti veću / manju vrijednost od minimalne ili maksimalne verzije kao što je > 4.0.3
Korištenje tilde određuje blok verzije. koristeći 1,2- se smatra 1.2.x, bilo koja verzija iznad 1.2.0, ali ispod 1.3

Dostupno je mnogo više načina određivanja verzija, ali to je dovoljno za većinu potreba. Sljedeći korak je stvaranje Gruntfilea koji će izvršiti naše automatizacije.

 module.exports = funkcija (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('zadano', []); ;

To je u osnovi kostur za Gruntfile; postoje dva zanimljiva mjesta. Jedna je lokacija unutar initConfig () funkcija. Ovdje se odvija sva konfiguracija vašeg projekta. To će uključivati stvari kao što su rukovanje LESS / SASS kompiliranjem, skraćivanje skripti i tako dalje.

Drugo mjesto nalazi se ispod te funkcije gdje određujete zadatke. Možete vidjeti jedan zadani zadatak “zadano”. Trenutačno je prazan pa ništa ne čini, ali to ćemo kasnije proširiti. Zadaci su u osnovi redovi bitova i komada iz naše konfiguracije projekta i izvršavaju ih.

Na primjer, zadatak pod nazivom “skripta” može spojiti sve naše skripte, zatim smanjiti rezultirajuću datoteku i premjestiti je na svoje krajnje mjesto. Sve tri akcije su definirane u konfiguraciji projekta, ali su “skupili” zadatka. Ako ovo nije jasno samo još ne brinite, pokazat ću vam kako se to radi.

Naša prva zadaća

Napravimo zadatak koji za nas umanji jednu javascript datoteku.

Postoje četiri stvari koje trebamo učiniti u bilo kojem trenutku kada želimo dodati novi zadatak:

Ako je potrebno, instalirajte dodatak
Zahtijevajte ga u Gruntfileu
Napišite zadatak
Po potrebi ga dodajte u radnu grupu

(1) Pronađite i instalirajte dodatak

Najlakši način da pronađete dodatak koji vam je potreban je da otkucate nešto slično u Google: “smanjiti javascript grunt plugin”. Prvi rezultat trebao bi vas odvesti do grunt-contrib-uglify dodatka koji je upravo ono što nam je potrebno.

Stranica Github govori vam sve što trebate znati. Instalacija je jedan redak u terminalu, evo što trebate koristiti:

 npm install grunt-contrib-uglify --save-dev

Možda ćete ovo morati pokrenuti s administratorskim privilegijama. Ako dobiješ nešto slično npm ERR! Pokušajte ponovno pokrenuti ovu naredbu kao root / Administrator. na putu samo upišite sudo prije naredbe i unesite lozinku kada se to zatraži:

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

Ova naredba zapravo analizira vašu package.json datoteku i dodaje je kao ovisnost, nećete to morati raditi ručno.

(2) Zahtjev u Gruntfileu

Sljedeći korak je dodati u svoj Gruntfile kao zahtjev. Volim dodavati dodatke na vrhu datoteke, evo mojeg kompletnog Gruntfila nakon dodavanja grunt.loadNpmTasks ( 'neslaganje-Doprinos-poružnjavati');.

 module.exports = funkcija (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('zadano', []); ;

(3) Napravite zadatak za smanjivanje skripti

Kao što smo raspravljali, to bi trebalo biti učinjeno unutar initConfig () funkcija. Github stranica za dodatak (i većina drugih dodataka) daje vam obilje informacija i primjera. Evo što sam koristio u testnom projektu.

 uglify: build: src: 'js / scripts.js', odredište: 'js / scripts.min.js'

To je prilično jednostavno, precizirao sam scripts.js datoteku u direktoriju js mog projekta i odredište za minificiranu datoteku. Postoji mnogo načina na koje možete odrediti izvorne datoteke, to ćemo kasnije pogledati.

Za sada, pogledajmo cjelokupni Gruntfile nakon što je dodan, kako bismo bili sigurni da znate kako se stvari uklapaju zajedno.

 module.exports = funkcija (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 ('zadano', []); ;

(4) Dodajte ovu konfiguraciju u skupinu zadataka

Sada možete otići do svog terminala i upisati grunt uglify ali trebat će nam radne grupe da kasnije pokrenemo više zadataka. Zadani zadatak je prazan, samo čekamo da se nešto doda pa ga prilagodimo sljedećem:

 grunt.registerTask ('zadano', ['uglify']);

U ovoj fazi vaš bi trebao biti u mogućnosti otići do terminala, upisati roktati i vidi kako će se dogoditi minifikacija. Ne zaboravite stvoriti scripts.js naravno!

To nije zahtijevalo mnogo vremena za postavljanje? Čak i ako ste novi u svemu ovome i trebalo vam je neko vrijeme da prođete kroz korake, ušteda će nadmašiti vrijeme provedeno na njemu u nekoliko navrata..

Povezivanje datoteka

Pogledajmo povezivanje datoteka i saznajte kako odrediti više datoteka kao cilj Putem.

Ujedinjavanje je proces kombiniranja sadržaja više datoteka u jednu datoteku. Trebat ćemo dodatak grunt-contrib-concat. Radimo kroz korake:

Za instaliranje upotrebe dodatka npm install grunt-contrib-concat --save-dev u terminalu. Kada završite, obavezno ga dodajte na Gruntfile kao i prije korištenja grunt.loadNpmTasks ( 'neslaganje-Doprinos-CONCAT');.

Sljedeća je konfiguracija. Spojimo tri specifične datoteke, sintaksa će biti poznata.

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

Gornji kod uzima tri datoteke koje su dane kao izvor i kombinira ih u datoteku koja je dana kao odredište.

To je već prilično snažno, ali što ako se doda nova datoteka? Trebamo li se stalno vraćati ovamo? Naravno da ne, možemo odrediti cijelu mapu datoteka za povezivanje.

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

Sada će se bilo koja datoteka javascripta u mapi dev / js spojiti u jednu veliku datoteku: js / scripts.js, puno bolje!

Sada je vrijeme da napravite zadatak tako da možemo spojiti neke datoteke.

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

To više nije zadani zadatak pa ćemo morati upisati njegovo ime u terminal kada izdamo roktati naredba.

 grunt mergejs

Automatizacija naše automatizacije

Već smo ostvarili mnogo napretka, ali ima još! Za sada, kada želite spojiti ili minificirati morate otići do terminala i upisati odgovarajuću naredbu. Krajnje je vrijeme da pogledamo Gledati naredbu koja će to učiniti za nas. Također ćemo naučiti kako izvršavati više zadataka odjednom, usput.

Da bismo krenuli, morat ćemo zgrabiti grunt-contrib-watch. Siguran sam da ga do sada možete instalirati i dodati u Gruntfile na yuor vlastitom, pa ću vam pokazati što koristim u testnom projektu.

 watch: scripts: files: ['dev / js / *. js'], zadaci: ['concat', 'uglify'],,

Nazvao sam skup datoteka za gledanje “skripta”, samo da znam što radi. Unutar ovog objekta odredio sam datoteke za gledanje i izvršavanje zadataka. U prethodnom primjeru ulančavanja skupili smo sve datoteke u direktorijumu dev / js.

U primjeru izmjene smanjili smo ovu datoteku. Ima smisla gledati dev / js mapu za promjene i izvoditi te zadatke kad god ih ima.

Kao što možete vidjeti, više zadataka može se jednostavno pozvati razdvajanjem zarezima. Oni će se izvoditi u slijedu, prvo u ulančavanju, zatim u minifikaciju u ovom slučaju. To se može učiniti i sa skupinama zadataka, što je vrsta razloga zbog kojih postoje.

Sada možemo izmijeniti zadani zadatak:

 grunt.registerTask ('default', ['concat' ',' uglify ']);

Sada imamo dva izbora. Kad god želite spojiti i smanjiti skripte, možete se prebaciti na terminal i upisati roktati. Također možete upotrijebiti naredbu za praćenje da biste pokrenuli gledanje datoteka: grunk watch.

Sjedit će tamo i čekati da izmijenite te datoteke. Kada to učinite, izvršit će sve zadatke koji su mu dodijeljeni, samo naprijed, pokušajte.

To je mnogo bolje, od nas nema potrebe za ulazom. Sada možete raditi sa svojim datotekama i sve će biti lijepo učinjeno za vas.

Pregled

S tim elementarnim znanjem o tome kako se plugini mogu instalirati i koristiti i kako radi zapovijed za sat, svi ste postavljeni da sami postanete ovisnik o automatizaciji. Grunt je mnogo više od onog o čemu smo razgovarali, ali ništa što ne možete sami riješiti.

Korištenje naredbi za kompajliranje SASS, optimiziranje slika, automatsko popravljanje i još mnogo toga samo je pitanje slijeda koraka o kojima smo raspravljali i čitanja sintakse koju dodatak zahtijeva.

Ako znate za neke posebno velike koristi za Grunt, javite nam u komentarima, uvijek smo zainteresirani čuti kako koristite alate kao što je Grunt!