Kaip naudoti Grunt automatizuoti savo darbo eigą [Tutorials]

Aš esu didžiulis automatizavimo gynėjas todėl, kad gyvenimas tampa daug paprastesnis. Kodėl praleidžiate laiką netikrioms, monotoniškoms užduotims, kurios čiulpia jūsų gyvybės jėgą iš karto, kai jūs turite kompiuterį, kad galėtumėte tai padaryti? Tai ypač pasakytina apie interneto svetainių kūrimą.

Daugelis plėtros užduočių gali būti darbas. Kuriant, galbūt norėsite surinkti kodą, stumdami kūrimo versiją, galite susieti ir redaguoti failus, pašalinti tik plėtros išteklius ir pan. Netgi palyginti nesudėtingi tie, kaip failų krūva arba aplankų pervadinimas gali užimti didelį mūsų laiko gabalą.

Šiame straipsnyje aš jums parodysiu, kaip lengviau padaryti savo gyvenimą, panaudojant „Grunt“, „Javascript“ užduoties atlikėjo puikią funkciją. Aš jums padėsiu per visą procesą, todėl nesijaudinkite, net jei nesate „JavaScript“ vedlys!

Daugiau apie „Hongkiat.com“:

• „CSSMatic“ CSS lengva kurti interneto dizaineriams
• Automatinių užduočių automatizavimas „Mac“ su aplankų veiksmais
• Automatizuokite „Dropbox“ failus su veiksmais
• 10 programų, padėsiančių automatizuoti „Android“ įrenginio užduotis
• Kaip (automatiškai) kopijuoti savo svetainę į „Dropbox“

Grunt diegimas

„Grunt“ diegimas yra gana lengvas, nes jis naudoja mazgo paketo tvarkyklę. Tai reiškia, kad jums gali tekti įdiegti patį „Node“. Atidarykite terminalą arba komandų eilutę (nuo šiol iškviesiu šį terminalą) ir įveskite nmp -v.

Jei matote versijos numerį, kurį turite npm įdiegta, jei pamatysite klaidos „komandą nerasta“, turėsite ją įdiegti, eidami į mazgų atsisiuntimo puslapį ir pasirinkdami reikiamą versiją.

Kai „Node“ yra įdiegtas, „Grunt“ gavimas yra vieno komando, išduoto terminalo, klausimas:

npm įdiegti -g grunt-cli

Pagrindinis naudojimas

Jūs naudosite „Grunt“ projekto pagrindu, nes kiekvienas projektas turės skirtingus reikalavimus. Pradėkime projektą dabar kurdami aplanką ir naviguodami į jį per mūsų terminalą.

Du failai sudaro Grunt širdį: package.json ir Gruntfile.js. Paketo faile apibrėžiami visi trečiosios šalies priklausomybės, kurias naudoja automatizavimas, „Gruntfile“ leidžia jums valdyti kaip tiksliai jie naudojami. Kurkime kaulų kaulų paketo failą su šiuo turiniu:

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

Pavadinimas ir versija priklauso nuo jūsų, priklausomybėse turi būti visi jūsų naudojami paketai. Šiuo metu mes nieko nedarome, todėl tik užtikrinsime, kad pats Gruntas būtų pridėtas kaip priklausomybė.

Jums gali būti užduodami klausimai apie tai, kas ten vyksta kaip tildė.

Versijos gali būti reikalingos naudojant semantinio versijos taisykles, skirtas npm. Trumpai tariant:

• Nurodote tikslią versiją, pvz 4.5.2
• Galite naudoti didesnę nei / mažesnę nei nurodyti minimalią ar maksimalią versiją, pvz., > 4.0.3
• Naudojant tilde nurodomas versijos blokas. Naudojimas ~ 1.2 laikoma 1.2.x, bet kokia versija, viršijanti 1.2.0, bet žemiau 1.3

Yra daug daugiau būdų, kaip nurodyti versijas, tačiau tai yra pakankama daugumai poreikių. Kitas žingsnis yra sukurti „Gruntfile“, kuri atliks mūsų automatizavimą.

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

Tai iš esmės yra Gruntfile skeletas; yra dvi lankytinos vietos. Viena vieta yra viduje initConfig () funkcija. Čia eina visa jūsų projekto konfigūracija. Tai apims tokius dalykus kaip LESS / SASS sudarymas, scenarijų redagavimas ir pan.

Antroji vieta yra žemiau šios funkcijos, kurioje nurodote užduotis. Galite matyti vieną nurodytą užduotį “numatytas”. Šiuo metu jis tuščias, todėl nieko nedaro, bet vėliau jį išplėsime. Užduotys iš esmės susideda iš bitų ir gabalų iš mūsų projekto konfigūracijos ir jas įgyvendina.

Pavyzdžiui, nurodyta užduotis “scenarijus” gali susieti visus mūsų scenarijus, tada surinkti gautą failą ir tada perkelti jį į galutinę vietą. Šie trys veiksmai yra apibrėžti projekto konfigūracijoje, bet yra “ištrauktas” pagal užduotį. Jei tai dar nėra aišku, tik nesijaudinkite, aš jums parodysiu, kaip tai daroma.

Mūsų pirmoji užduotis

Kurkime užduotį, kuri ištaiso mums vieną „JavaScript“ failą.

Norime pridėti naują užduotį, turime atlikti keturis dalykus:

• Jei reikia, įdiekite papildinį
• Reikalauti, kad tai būtų Gruntfile
• Parašykite užduotį
• Jei reikia, pridėkite ją prie užduočių grupės

(1) Rasti ir įdiegti papildinį

Paprasčiausias būdas surasti jums reikalingą papildinį yra įvesti kažką panašaus į „Google“: “ištaisyti javascript grunt plugin”. Pirmasis rezultatas turėtų paskatinti jus į grunt-plug-uglify įskiepį, kuris yra būtent tai, ko mums reikia.

„Github“ puslapis nurodo viską, ką reikia žinoti. Įdiegimas yra viena linija terminale, čia reikia naudoti:

 „npm“ įdiegti „Grunt-In-Uglify“ - „Save-dev“ 

Gali tekti tai paleisti su administratoriaus privilegijomis. Jei gaunate kažką panašaus npm ERR! Pabandykite dar kartą paleisti šią komandą kaip root / administratorius. pakeliui tiesiog įveskite sudo prieš komandą ir įveskite užklausą:

 sudo npm įdiegti grunt-dev-uglify --save-dev 

Ši komanda faktiškai analizuoja jūsų package.json failą ir prideda jį kaip priklausomybę ten, jums to nereikės atlikti rankiniu būdu.

(2) Reikalauti „Gruntfile“

Kitas žingsnis yra pridėti „Gruntfile“ kaip reikalavimą. Man patinka failo viršuje pridėti įskiepių grunt.loadNpmTasks („grunt-aid-uglify“);.

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

(3) Sukurkite scenarijų redagavimo užduotį

Kaip aptarėme, tai turėtų būti padaryta per initConfig () funkcija. Įskiepio „Github“ puslapyje (ir daugelyje kitų papildinių) pateikiama daug informacijos ir pavyzdžių. Štai ką aš panaudojau bandymo projekte.

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

Tai gana paprasta, nurodiau scripts.js failą mano projekto js kataloge ir minifikuoto failo paskirties vietą. Yra daug būdų, kaip nurodyti šaltinio failus, mes tai peržiūrėsime vėliau.

Šiuo metu pažiūrėkime visą „Gruntfile“ failą, kai tik pridėsite šį failą, kad įsitikintumėte, ar žinote, kaip viskas suderinta.

 module.exports = funkcija (grunt) grunt.loadNpmTasks („grunt-load-uglify“); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask („numatytasis“, []); ; 

(4) Įdėkite šią konfigūraciją į užduočių grupę

Dabar galite eiti į savo terminalą ir tipą grunt bet mums reikės užduočių grupių, kad vėliau atliktume keletą užduočių. Turime numatytąjį užduotį tuščią, tiesiog laukiame, kol bus pridėta kažkas, todėl pakeiskime ją į šiuos dalykus:

 grunt.registerTask („numatytasis“, ['uglify']); 

Šiame etape turėtumėte turėti galimybę eiti į terminalą grunt ir pažiūrėkite, kas vyksta. Nepamirškite sukurti a scripts.js žinoma!

Tai neužtruko daug laiko, kad tai padarytų? Net jei jūs esate visa tai, ir tai užtruko šiek tiek laiko, kad dirbtumėte po žingsnių, laikas, kurį jis taupo, viršys laiką, praleistą per kelis naudojimo būdus.

Failų susiejimas

Pažvelkime į failų sujungimą ir sužinokite, kaip nurodyti kelis failus kaip tikslą pakeliui.

Susiejimas - tai kelių failų turinio sujungimas į vieną failą. Mums reikės „grunt-insul-concat“ papildinio. Dirbkime pagal veiksmus:

Norėdami įdiegti papildinio naudojimą npm įdiekite grunt-cont-concat --save-dev terminale. Atlikę, įsitikinkite, kad jį pridėsite prie „Gruntfile“ kaip ir prieš naudodami grunt.loadNpmTasks („grunt-cont-concat“);.

Toliau yra konfigūracija. Sudėsime tris konkrečius failus, sintaksė bus žinoma.

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

Viršuje esantis kodas užima tris šaltinius, nurodytus kaip šaltinis, ir sujungia juos į failą, pateiktą kaip paskirties vieta.

Tai jau gana galinga, bet kas, jei pridedamas naujas failas? Ar mes turime visą laiką grįžti čia? Žinoma, ne, galime nurodyti visą failų aplanką, kad galėtumėte susieti.

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

Dabar bet kuris „dev / js“ aplanko „JavaScript“ failas bus sujungtas į vieną didelį failą: js / scripts.js, daug geriau!

Dabar atėjo laikas sukurti užduotį, kad galėtume susieti kai kuriuos failus.

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

Tai nebėra numatytoji užduotis, todėl mums reikės įvesti jo pavadinimą terminale, kai išduosime grunt komandą.

 grunt mergejs 

Automatizavimas

Mes jau padarėme daug pažangos, bet yra daugiau! Šiuo metu, kai norite susieti ar redaguoti, turite eiti į terminalą ir įvesti atitinkamą komandą. Atėjo laikas pažvelgti į žiūrėti komanda, kuri tai padarys mums. Mes taip pat išmoksime, kaip vienu metu atlikti įvairias užduotis.

Norint eiti, mums reikės patraukti žiūrėti. Esu įsitikinęs, kad jūs galite jį įdiegti ir pridėti jį prie „Gruntfile“ jau dabar, todėl pradėsiu rodyti, ką naudoju savo bandymų projekte.

 watch: scripts: files: ['dev / js / *. js'], užduotys: ['concat', 'uglify'],, 

Aš pavadinau rinkmenų rinkinį “scenarijus”, tik todėl aš žinau, ką jis daro. Šiame objekte aš turėjau nurodytus failus, kuriuos reikia žiūrėti, ir užduotis. Ankstesniame susiejimo pavyzdyje mes ištraukėme visus failus iš dev / js katalogo.

Minifikacijos pavyzdyje šį failą ištaisėme. Svarbu žiūrėti dev / js aplanką pakeitimams ir paleisti šias užduotis, kai tik yra.

Kaip matote, daug užduočių gali būti vadinamos lengvai, atskiriant jas kableliais. Jie bus atliekami nuosekliai, pirmiausia susiliejimas, tada minifikacija šiuo atveju. Tai taip pat galima padaryti su užduočių grupėmis, kurios yra tokios, kodėl jos egzistuoja.

Dabar galime pakeisti numatytąjį užduotį:

 grunt.registerTask („numatytasis“, [„concat“, „uglify“)); 

Dabar turime du pasirinkimus. Kai norite susieti ir redaguoti savo scenarijus, galite pereiti prie terminalo ir tipo grunt. Taip pat galite naudoti stebėjimo komandą, kad pradėtumėte stebėti savo failus: žiūrėti.

Jis sėdės ten, laukdamas, kol jūs pakeisite šiuos failus. Kai tai padarysite, ji atliks visas jai pavestas užduotis, eik į priekį, pabandys.

Tai daug geriau, mums nereikia jokių duomenų. Dabar galite dirbti su savo failais ir viskas bus gerai padaryta jums.

Apžvalga

Su šiomis pradinėmis žiniomis apie tai, kaip galima įdiegti ir naudoti įskiepius ir kaip veikia laikrodžio komanda, visi esate pasiruošę tapti automatikos priklausomybe. Gruntui yra daug daugiau nei tai, apie ką kalbėjome, bet nieko, ko negalėjote tvarkyti.

Naudojant SASS kompiliavimo komandas, optimizuojant vaizdus, ​​automatinį atkūrimą ir dar daugiau, reikia sekti veiksmus, kuriuos aptarėme, ir skaitydami sintaksę, kurią reikia papildyti.

Jei žinote, kad „Grunt“ yra ypač naudinga, praneškite mums savo komentaruose, mes visada domisi, kaip naudoti tokias priemones kaip „Grunt“!