Grunt'i kasutamine tööprotsessi automatiseerimiseks [Tutorials]

Ma olen a suur automatiseerimise pooldaja sest see muudab elu palju lihtsamaks. Miks veeta aega elutähtsate, monotoonsete ülesannetega, mis imevad teie elujõudu just siis, kui teil on arvuti teie jaoks asjade tegemiseks? See kehtib eriti veebiarenduse kohta.

Paljud arendustööd võivad olla koristustööd. Arendamise ajal võiksite koostada koodi, arendusversiooni vajutamisel võite failid kokku lüüa ja minimeerida, eemaldada ainult arendusressursse ja nii edasi. Isegi suhteliselt keerulised, näiteks failide hulga kustutamine või kaustade ümbernimetamine võib võtta meie aja suurest tükist.

Selles artiklis ma näitan sulle, kuidas saate oma elu lihtsamaks muuta, kasutades selleks Grunt'i, Javascript ülesannete jooksja pakutavaid suurepäraseid funktsioone. Ma juhin teid kogu protsessi läbi, nii et ei muretse isegi siis, kui te ei ole Javascript nõustaja!

Veel Hongkiat.com lehelt:

CSSMatic muudab CSS veebidisainerite jaoks lihtsaks
Ülesannete automatiseerimine Maci toimingutega
Automatiseerige oma Dropboxi failid toimingutega
10 rakendust, mis aitavad teie Android-seadmel ülesandeid automatiseerida
Kuidas (automaatselt) varundada oma veebileht Dropboxi

Grunti installimine

Grunti installimine on üsna lihtne, sest kasutab sõlme paketthaldurit. See tähendab, et võib-olla peate ise Node'i installima. Avage terminal või käsurea (ma helistan sellest terminalist edaspidi) ja sisestage nmp -v.

Kui näete oma versiooni numbrit npm installitud, kui näete viga "käsk ei leitud", peate selle installima, minnes sõlme allalaadimise lehele ja valides vajaliku versiooni.

Kui sõlme on installitud, on Grunt'i hankimine terminalis ühe käsu andnud:

npm install -g grunt-cli

Põhikasutus

Te kasutate Grunt'i projekti-projekti alusel, kuna igal projektil on erinevad nõuded. Alustame nüüd projekti, luues kausta ja navigeerides sellele ka meie terminali kaudu.

Kaks faili moodustavad Grunt'i südame: package.json ja Gruntfile.js. Pakettfail määrab kõik kolmanda osapoole sõltuvused, mida teie automatiseerimine kasutab, Gruntfile võimaldab teil kontrollida kuidas täpselt neid kasutatakse. Looge nüüd tühi-luud pakettfail, millel on järgmine sisu:

"name": "testprojekt", "versioon": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Nimi ja versioon on teie enda otsustada, sõltuvused peavad sisaldama kõiki kasutatavaid pakette. Praegu ei tee me midagi, nii et me lihtsalt veendume, et Grunt on sõltuvuseks lisatud.

Te võite küsida endalt, mida see tiglijooneline tigli nimetus seda teeb.

Võimalik on versioonide kasutamine semantilise versiooni muutmise reeglitega. Lühidalt:

Täpsustate täpse versiooni nagu 4.5.2
Võite kasutada suuremat või vähem kui minimaalset või maksimaalset versiooni, näiteks > 4.0.3
Tilde kasutamine määrab versiooniploki. Kasutamine ~ 1.2 peetakse 1.2.x, mis tahes versioon üle 1.2.0, kuid allpool 1.3

Versioonide täpsustamiseks on palju rohkem võimalusi, kuid see on enamiku vajaduste jaoks piisav. Järgmine samm on luua Gruntfile, mis täidab meie automatiseerimist.

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

See on põhimõtteliselt Gruntfile'i skelett; seal on kaks huvipunkti. Üks asukoht asub initConfig () funktsiooni. Siin läheb kõik teie projekti konfiguratsioonid. See hõlmab selliseid asju nagu LESS / SASS kompileerimine, skriptide redigeerimine jne.

Teine asukoht on selle funktsiooni all, kus määrate ülesanded. Näete ühte määratud nime “vaikimisi”. See on hetkel tühi, nii et see ei tee midagi, kuid laiendame seda hiljem. Ülesanded peatavad põhimõtteliselt bittid ja tükid meie projekti konfiguratsioonist ja täidavad neid.

Näiteks nimi ülesanne “skriptid” võib koondada kõik meie skriptid, seejärel minimeerida saadud faili ja seejärel viia see oma lõplikku asukohta. Need kolm toimingut on kõik määratletud projekti konfiguratsioonis, kuid on “tõmmatakse kokku” ülesanne. Kui see pole veel selge, siis ärge muretsege, näitan teile, kuidas seda tehakse.

Meie esimene ülesanne

Looge ülesanne, mis minimeerib meie jaoks ühe javascripti faili.

Uue ülesande lisamiseks peame tegema neli asja.

Vajadusel installige plugin
Nõua seda Gruntfailis
Kirjutage ülesanne
Lisage see vajadusel töörühmale

(1) Plugina leidmine ja installimine

Lihtsaim viis leida vajalik plugin on kirjutada midagi sellist Google'isse: “minigeerige javascript grunt plugin”. Esimene tulemus peaks viima teid grunt-hozzájárusesse, mis on just see, mida me vajame.

Githubi lehekülg ütleb teile kõik, mida pead teadma. Paigaldamine on terminali üks rida, mida on vaja kasutada:

 npm installeeri grunt-osamaksu -sõit-dev

Teil võib tekkida vajadus seda käivitada administraatori privileegidega. Kui saad midagi npm ERR! Palun proovige seda käsku root / administraatorina uuesti käivitada. tippige tee peale käsku sudo ja sisestage parool, kui palutakse:

 sudo npm installige grunt-dev-uglify --save-dev

See käsk pärsib teie package.json fail ja lisab selle sõltuvuseks seal, siis ei pea seda käsitsi tegema.

(2) Nõua Gruntfile'is

Järgmine samm on lisada oma Gruntfile'i nõue. Mulle meeldib lisada pluginad faili ülaosas, siin on minu täielik Gruntfile pärast lisamist grunt.loadNpmTasks ('grunt-iem-uglify');.

 module.exports = funktsioon (grunt) grunt.loadNpmTasks ('grunt-hozzájárul-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

(3) Loo ülesanne skriptide minimeerimiseks

Nagu me arutasime, tuleks seda teha initConfig () funktsiooni. Plugina (ja enamiku teiste pluginate) Githubi lehekülg annab teile palju teavet ja näiteid. Siin on see, mida ma oma testprojektis kasutasin.

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

See on üsna lihtne, täpsustasin scripts.js faili minu projekti j kataloogi ja minigeeritud faili sihtpunkti. Lähtefailide määramiseks on palju viise, vaatame seda hiljem.

Nüüd vaatame täielikku Gruntfaili pärast selle lisamist, et veenduda, et tead, kuidas asjad kokku sobivad.

 module.exports = funktsioon (grunt) grunt.loadNpmTasks ('grunt-hozzájárul-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ;

(4) Lisage see konfiguratsioon töögrupile

Praegu võid minna oma terminalile ja tüübile torkama kuid me vajame hiljem mitmeid ülesandeid. Meil on vaikimisi ülesanne tühi, lihtsalt oodates, et midagi lisatakse, nii et muutkem seda järgmisele:

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

Selles etapis peaksite saama minna terminali, tüüp grunt ja vaadake, kuidas toimub kaevandamine. Ära unusta luua scripts.js muidugi!

See ei võtnud palju aega, et seda teha? Isegi kui sa oled selle jaoks uus ja et sammude tegemiseks kulus mõnda aega, ületab see aega, mis kulub selle aja jooksul, mis kulub sellele mõne aja jooksul.

Failide ühendamine

Vaatame failide ühendamist ja õppida, kuidas määrata mitu faili sihtmärgina tee peal.

Koondamine on mitme faili sisu koondamine ühte faili. Me vajame grunt-pris-concat pluginat. Töötame läbi järgmiste sammude:

Plugina kasutamise installimiseks npm installige grunt-contat-concat - save-dev terminalis. Kui see on tehtud, lisage see kindlasti oma Gruntfile'i nagu enne kasutamist grunt.loadNpmTasks ('grunt-cont-concat');.

Järgmine ülesanne on konfiguratsioon. Ühendame kolm konkreetset faili, süntaks on tuttav.

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

Ülaltoodud kood võtab kolme allikana antud faili ja ühendab need sihtkohana antud faili.

See on juba üsna võimas, kuid mis siis, kui lisatakse uus fail? Kas me peame kogu aeg siia tagasi tulema? Loomulikult ei saa me kokku panna kogu failide kausta, mis on ühendatud.

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

Nüüd ühendatakse ükskõik milline fail / dev / js kaustas üks suur fail: js / scripts.js, palju parem!

Nüüd on aeg luua ülesanne, et saaksime mõned failid kokku lüüa.

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

See ei ole enam vaikimisi ülesanne, seega peame selle väljastamisel terminalis selle nime kirjutama grunt käsk.

 grunt mergejs

Automatiseerimise automatiseerimine

Oleme juba teinud palju edusamme, kuid veel! Praegu, kui soovid kokku lüüa või kaevandada, peate minema terminalile ja sisestama vastava käsu. On viimane aeg vaadata vaata käsk, mis seda meie heaks teeb. Samuti õpime, kuidas teha mitmetahulisi ülesandeid korraga.

Lähenemiseks peame haarama runt-watch-watch. Olen kindel, et saate selle installida ja lisada selle Gruntfile'ile juba praegu, nii et ma hakkan teile näitama, mida ma oma testiprojektis kasutan.

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

Ma nimetasin vaatamiseks vajalikke faile “skriptid”, just nii ma tean, mida ta teeb. Selle objekti sees olen määranud failid, mida vaadata ja ülesandeid käivitada. Eelmises konkatenatsiooni näites tõmmati kokku kõik failid dev / js kataloogis.

Minimisnäites vähendasime seda faili. Mõttekas on vaadata dev / js kausta muudatuste jaoks ja käivitada need ülesanded alati, kui neid on.

Nagu näete, saab mitu ülesannet lihtsalt kutsuda komadega eraldades. Neid tehakse järjestikku, kõigepealt konkatenatsiooni, seejärel kaevandamist. Seda saab teha ka töörühmadega, mis on selline, miks nad olemas on.

Nüüd saame muuta oma vaikimisi ülesannet:

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

Nüüd on meil kaks valikut. Kui soovite oma skripte kokku lüüa ja minimeerida, saate lülituda terminali ja tüübi juurde grunt. Samuti saate vaadata failide vaatamise algatamiseks käsklust: vaatama.

See istub seal, oodates neid faile muutma. Kui olete seda teinud, täidab see kõik talle määratud ülesanded, jätkake, proovige.

See on palju parem, meilt pole vaja sisendit. Nüüd saate oma failidega ära töötada ja kõik on teile hästi tehtud.

Ülevaade

Selle algelise teadmisega selle kohta, kuidas pluginaid saab paigaldada ja kasutada ning kuidas käskluskäsk töötab, olete kõik seadistatud automatiseerimise sõltuvusse. Gruntile on palju rohkem kui see, mida me arutasime, kuid midagi, mida sa ise ei suutnud.

SASSi koostamise käskude kasutamine, piltide optimeerimine, automaatne parandamine ja muud on vaid küsimus, mida järgime ja mida plugin vajab süntaksi lugemiseks.

Kui te teate, et Grunt on eriti kasulik, andke meile oma kommentaarides teada, me oleme alati huvitatud sellest, kuidas te kasutate Grunt'i tööriistu!