Kako uporabljati Grunt avtomatizirati vaš potek dela [Vadnice]

Jaz sem velik zagovornik avtomatizacije ker naredi življenje tako preprostejše. Zakaj bi porabili čas za ropske, monotone naloge, ki vam sesajo življenjsko silo, ko imate računalnik, ki dela za vas? To še posebej velja za razvoj spletnih strani.

Veliko razvojnih nalog je lahko opravilo. Med razvojem boste morda želeli prevesti kodo, ko boste uporabili razvojno različico, lahko združite in zmanjšate datoteke, odstranite le vire za razvoj in tako naprej. Tudi razmeroma preproste, kot je brisanje veliko datotek ali preimenovanje map lahko zavzame velik kos našega časa.

V tem članku vam bom pokazal, kako lahko olajšate svoje življenje z izkoriščanjem odlične funkcionalnosti, ki jo ponuja Grunt, izvajalec opravil Javascript. Vodil vas bom skozi celoten proces, tako da vam ni treba skrbeti, tudi če niste čarovnik za Javascript!

Več na Hongkiat.com:

• CSSMatic omogoča CSS enostavno za spletne oblikovalce
• Avtomatiziranje opravil v Mac z dejanjem mape
• Avtomatizirajte datoteke Dropbox z dejanji
• 10 aplikacij za avtomatizacijo opravil v napravi Android
• Kako (samodejno) varnostno kopiranje vaše spletne strani v Dropbox

Namestitev Grunta

Namestitev Grunta je precej preprosta, ker uporablja upravljalnik paketov vozlišč. To pomeni, da boste morda morali namestiti tudi Node. Odprite terminal ali ukazni poziv (od zdaj naprej bom klical ta terminal) in vnesite nmp -v.

Če vidite številko različice, ki jo imate npm nameščen, če vidite napako »ukaz ni mogoče najti«, ga boste morali namestiti tako, da odprete stran prenosov vozlišč in izberete različico, ki jo potrebujete.

Ko je Node nameščen, je pridobitev Grunta stvar enega samega ukaza, izdanega v terminalu:

npm namestite -g grunt-cli

Osnovna uporaba

Grunt boste uporabljali na podlagi projekta od projekta do projekta, saj bo vsak projekt imel različne zahteve. Zdaj začnimo projekt tako, da ustvarimo mapo in se pomaknemo do nje tudi preko našega terminala.

Dve datoteki tvorita srce Grunta: package.json in Gruntfile.js. Paketna datoteka določa vse odvisnosti tretjih oseb, ki jih bo uporabljala avtomatizacija, Gruntfile pa vam omogoča nadzor kako natančno se uporabljajo. Ustvarimo zdaj paketno datoteko z naslednjo vsebino:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Ime in različica sta odvisna od vas, odvisnosti morajo vsebovati vse pakete, ki jih uporabljate. Trenutno ne delamo ničesar, zato bomo poskrbeli, da bo Grunt sam dodan kot odvisnost.

Morda se sprašujete, kaj tista črta (~), ki se imenuje tilda, dela tam.

Verzije se lahko zahtevajo z uporabo pravil iz semantične različice za npm. Na kratko:

• Podate natančno različico 4.5.2
• Uporabite lahko več kot / manj kot označite najmanjšo ali največjo različico, kot je > 4.0.3
• Uporaba tilde določa blok različice. Uporaba ~ 1.2 se šteje za 1.2.x, katero koli različico nad 1.2.0, vendar pod 1.3

Na voljo je veliko več načinov določanja različic, vendar je to dovolj za večino potreb. Naslednji korak je ustvariti Gruntfile, ki bo izvajal naše avtomatizacije.

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

To je v bistvu okostje za Gruntfile; Obstajata dva zanimiva mesta. Ena lokacija je znotraj initConfig () funkcijo. Tukaj poteka celotna konfiguracija vašega projekta. To bo vključevalo stvari, kot je obdelava LESS / SASS prevajanja, skrčevanje skript in tako naprej.

Druga lokacija je pod to funkcijo, kjer določite naloge. Vidite lahko eno nalogo, ki je navedena “privzeto”. Trenutno je prazen, zato ne dela ničesar, vendar se bomo o tem poglobili kasneje. Naloge v bistvu čakajo na vrsto bitov in kosov iz naše konfiguracije projekta in jih izvajajo.

Na primer, naloga z imenom “skripte” lahko združi vse naše skripte, nato pa zmanjša nastalo datoteko in jo premakne na končno lokacijo. Vsi ti trije ukrepi so definirani v konfiguraciji projekta, vendar so “skupaj” nalogo. Če to ni jasno, vendar ne skrbite, vam bom pokazal, kako je to storjeno.

Naša prva naloga

Ustvarimo nalogo, ki nam zaenkrat zmanjša eno datoteko javascript.

Obstajajo štiri stvari, ki jih moramo storiti, kadar želimo dodati novo nalogo:

• Po potrebi namestite vtičnik
• Zahtevajte ga v datoteki Grunt
• Napišite nalogo
• Po potrebi ga dodajte v opravilno skupino

(1) Poiščite in namestite vtičnik

Najlažji način, da najdete vtičnik, ki ga potrebujete, je, da vnesete nekaj takega v Google: “zmanjšali javascript grunt plugin”. Prvi rezultat bi vas moral pripeljati do plugina grunt-contrib-uglify, ki je prav tisto, kar potrebujemo.

Stran Github vam pove vse, kar morate vedeti. Namestitev je ena vrstica v terminalu, tukaj je tisto, kar morate uporabiti:

 npm namestite grunt-contrib-uglify --save-dev 

To boste morda morali zagnati z skrbniškimi privilegiji. Če dobiš nekaj takega npm ERR! Poskusite znova zagnati ta ukaz kot root / skrbnik. na poti preprosto vtipkajte sudo pred ukaz in vnesite geslo, ko boste pozvani:

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

Ta ukaz dejansko razčleni vaše package.json datoteko in jo doda kot odvisnost, ne boste morali ročno.

(2) Zahtevaj v Gruntfile

Naslednji korak je, da dodate v svoj Gruntfile kot zahtevo. Všeč mi je, da na vrh datoteke dodam vtičnike, tukaj je moj celoten Gruntfile po dodajanju grunt.loadNpmTasks ('grunt-contrib-uglify');.

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

(3) Ustvarite nalogo za zmanjšanje skripte

Kot smo razpravljali, je treba to storiti znotraj EU initConfig () funkcijo. Stran Github za vtičnik (in večina drugih vtičnikov) vam ponuja veliko informacij in primerov. Tukaj sem uporabil testni projekt.

 uglify: build: src: 'js / scripts.js', namesto: 'js / scripts.min.js' 

To je precej enostavno, sem določil scripts.js datoteko v imeniku projekta js mojega projekta in destinacijo za datoteko z zmanjšanjem. Izvornih datotek lahko podate na več načinov, kar bomo videli kasneje.

Zaenkrat si poglejmo celoten Gruntfile, potem ko je bil dodan, da boste vedeli, kako se stvari ujemajo..

 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 ('privzeto', []); ; 

(4) Dodajte to konfiguracijo v opravilno skupino

Zdaj lahko greš na svoj terminal in tip grunt uglify vendar bomo morali opravilne skupine pozneje poganjati več nalog. Privzeto opravilo je prazno, samo čakamo, da se nekaj doda, zato ga prilagodimo naslednjemu:

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

Na tej stopnji bi morali imeti možnost, da greste na terminal, tip grunt in glej, da bo prišlo do ponavljanja. Ne pozabite ustvariti scripts.js seveda!

To ni trajalo veliko časa za vzpostavitev? Tudi če ste novi v vsem tem in vam je bilo potrebno nekaj časa za delo skozi korake, bo čas, ki ga prihranite, presegel čas, porabljen za to v nekaj uporabah..

Združevanje datotek

Poglejmo združevanje datotek in Naučite se, kako določiti več datotek kot cilj spotoma.

Združevanje je proces združevanja vsebine več datotek v eno datoteko. Potrebovali bomo vtičnik grunt-contrib-concat. Delajmo po korakih:

Za namestitev plugina npm install grunt-contrib-concat --save-dev v terminalu. Ko končate, se prepričajte, da ste jo dodali na vaš Gruntfile, tako kot pred uporabo grunt.loadNpmTasks ('grunt-contrib-concat');.

Naslednja je konfiguracija. Združimo tri posebne datoteke, sintaksa bo znana.

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

Zgornja koda vzame tri datoteke kot vir in jih združi v datoteko, ki je določena kot cilj.

To je že precej močno, a kaj, če se doda nova datoteka? Ali se moramo ves čas vrniti sem? Seveda ne, določimo lahko celotno mapo datotek za združevanje.

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

Zdaj bo katera koli datoteka javascript v mapi dev / js združena v eno veliko datoteko: js / scripts.js, precej bolje!

Zdaj je čas, da ustvarite nalogo, da lahko dejansko povežemo nekatere datoteke.

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

To ni več privzeta naloga, zato bomo morali vtipkati njeno ime v terminal, ko bomo izdali grunt ukaz.

 grunt mergejs 

Avtomatizacija naše avtomatizacije

Dosegli smo že velik napredek, vendar ni več! Za zdaj, ko želite združiti ali razgraditi, morate iti na terminal in vtipkati ustrezen ukaz. Skrajni čas je, da pogledamo gledam ukaz, ki bo to naredil za nas. Prav tako se bomo naučili naučiti, kako naenkrat opraviti več nalog.

Za začetek bomo morali zagrabiti grunt-contrib-watch. Prepričan sem, da ga lahko namestite in dodate do Gruntfile na yuor do sedaj, tako da vam bom začel prikazovati, kaj uporabljam v testnem projektu..

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

Poimenoval sem niz datotek za ogled “skripte”, samo zato, da vem, kaj počne. V tem predmetu sem določil datoteke za ogled in izvajanje. V prejšnjem primeru združevanja smo združili vse datoteke v imeniku dev / js.

V primeru zmanjšanja smo to datoteko zmanjšali. Smiselno je gledati mapo dev / js za spremembe in zagnati te naloge, kadar koli jih je.

Kot lahko vidite, lahko več opravil enostavno prikličete tako, da jih ločite z vejicami. Izvajali se bosta v zaporedju, najprej z združevanjem, nato pa s ponavljanjem v tem primeru. To je mogoče storiti tudi z delovnimi skupinami, kar je nekako razlog za njihovo obstoj.

Zdaj lahko spreminjamo privzeto nalogo:

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

Zdaj imamo dve možnosti. Kadarkoli želite združiti in zmanjšati skripte, lahko preklopite na terminal in vnesete grunt. Ukaz gledanja lahko uporabite tudi za začetek gledanja datotek: grunt watch.

Sedel bo tam in čakal, da boste spremenili te datoteke. Ko boste to storili, bo opravil vse naloge, ki so mu dodeljene, nadaljujte, poskusite.

To je veliko bolje, od nas ni potreben vnos. Sedaj lahko delate z vašimi datotekami in vse bo lepo za vas.

Pregled

S tem osnovnim znanjem o tem, kako je mogoče namestiti in uporabljati vtičnike in kako deluje ukaz za uro, ste vsi sami pripravljeni postati odvisnik za avtomatizacijo. Grunt je veliko več, kot smo govorili, ampak ničesar, česar sami ne bi mogli obvladati.

Uporaba ukazov za prevajanje SASS, optimiziranje slik, samodejne popravke in še več, je samo vprašanje, kako slediti korakom, o katerih smo razpravljali, in branju sintakse, ki jo zahteva vtičnik.

Če veste, da za Grunt uporabljate nekaj izjemnih primerov, nam to sporočite v komentarjih, vedno nas zanima, kako uporabljate orodja, kot je Grunt!