Lag vår første oppgave med Grunt

Installasjonen og etableringen av Grynte Det er noe ganske enkelt å gjøre, men når vi har alle verktøyene og kjenner noen av de grunnleggende kommandoene, lurer vi ofte på hva vi kan gjøre nå? Det neste trinnet er veldig enkelt, det er på tide å begynne å bygge oppgaver.
Tanken bak en oppgave er at det kan være noe som kan løse vanlige problemer eller aktiviteter som vi alltid utfører i løpet av arbeidsdagen eller applikasjonsutviklingen, der vi kan gjenta parametere for disse oppgavene og være repeterende i naturen, og dermed kan de alltid fungere uten at du trenger å lage dem fra bunnen av.
KravDenne opplæringen anbefaler at du kjenner det grunnleggende JavaScript fordi vi vil bruke mange ting fra dette språket. Et annet viktig krav er at vi må ha installert og konfigurert Grynte i vårt system eller sandkasse betyr dette at vi må ha Node.js, pakkelederen din npm og selvfølgelig Grynte. Til slutt må vi ha en tekstredigerer for å lage innholdet i øvelsene og tilstrekkelige tillatelser til å lage filer og utføre grunt -kommandoen i konsollen fritt.
En oppgave er en aktivitet som har en begynnelse, en utvikling og en slutt, i Grynte en oppgave er ikke annet enn en funksjon i JavaScript som finnes i filen Gruntfile.js og det når du utfører kommandoen grynte i konsollen vår kan vi få denne funksjonen til å bli utført, slik at innholdet blir lansert.
Oppgavene styres på en modulær måte, mye i stil med den grunnleggende konstitusjonen av Node.jsDerfor, hver gang vi definerer et nytt sett med oppgaver, må vi legge til instruksjonene som angir deres modularitet.
For å lage en oppgave trenger vi en grunnkode i filen vår gruntfile.js, denne koden kalles kokeplate fordi det er repeterende, men vi bruker det bare en gang, la oss se hvordan det ser ut:

 module.exports = function (grunt) {// her er innholdet i oppgavene våre};

Når vi har plassert koden i filen vår, har vi allerede grunnlaget eller grunnloven for å kunne lage oppgavene våre. Når dette er gjort, skal vi gjøre en oppgave som lar oss skrive en melding etter konsoll, for dette skal vi skrive følgende kode:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {console.log ('Hallo, vi har kastet en melding i Grunt.');});};

Det vi har gjort er veldig enkelt å forklare, først har vi tatt objektet grynte som vi lager med koden vår kokeplate, så i dette objektet har vi utført metoden registerTask hva hjelper oss å fortelle Grynte at vi legger til en ny oppgave, neste handling gir vi den et navn, og deretter sender vi med en anonym funksjon innholdet i oppgaven vår til den, som i dette tilfellet er meldingen på konsollen.
La oss se hvordan dette eksemplet ser ut når vi utfører oppgaven, for det i mappen der vi lagrer filen vår gruntfile.js vi skal utføre følgende kommando:

 grynte

Hvor skal konsollen gi oss et resultat som følgende:

Det er viktig å nevne at vi bruker standardnavnet for denne oppgaven fordi det er oppgaven som Grynte den søker som standard som navnet indikerer i filen vår gruntfile.js, hvis det ikke hadde det navnet, ville vi få en feilmelding ved kjøring grynte som vi ser på følgende bilde:

Vårt tidligere eksempel, selv om det fungerer, er ikke det mest anbefalte, vi har ganske enkelt benyttet konsollen Node.js men dette har ikke alle funksjonene og egenskapene til konsollen Grynte så hvis vi har tilleggsinformasjon fra oppgavemotoren, vil vi sikkert ikke se den. Det er derfor vi må bruke konsollen til oppgaveautomatiseringsmotoren vår. Konseptet i filosofi er praktisk talt det samme som at vi endrer objektene og funksjonene vi må kalle.
La oss se i følgende kode hvordan vi kan skrive om koden vår fra forrige eksempel for å kunne oppfylle det vi har forklart:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {grunt.log.writeln ('Denne meldingen vises av Grunt -konsollen.');});};

Hvordan vi ser gjenbruker vi bare objektet grynte initial av filen, så bruker vi klassen Logg og til slutt metoden skrive, resultatet er det samme som i forrige eksempel bare med den forskjellen at vi har brukt noe mer optimalt til våre formål. La oss se på følgende bilde hvordan alt ble vedlikeholdt på riktig måte:

I begynnelsen snakket vi om gjenbrukbare oppgaver og som gjør at vi kan spare tid. En av tingene som kan tillate oss å oppnå en tilstrekkelig grad av gjenbruk av oppgavene, er muligheten for å legge til parametere til dem, med dette kan vi endre noen verdier I henhold til situasjonen vi kan befinne oss i, for eksempel å opprette brukere for et system direkte med Grynte, som vi som parameter kan overføre et filnavn med listen over brukere.
I den følgende koden skal vi gjøre noe veldig interessant, først og fremst skal vi se hvordan vi lager oppgaver som ikke er vår standardprosess, med dette vil vi allerede ha nøkkelen til å ha flere oppgaver i samme fil. Parameteren som vil motta oppgaven vår vil ganske enkelt bli satt i den anonyme funksjonen, på denne måten kan vi fange og behandle den i kroppen av den.
La oss se koden for å generere denne oppgaven, som en øvelse kan vi plassere koden etter vår standardoppgave for å teste det vi har forklart:

 grunt.registerTask ('hello', function (name) {grunt.log.writeln ('Hello:' + name + 'good morning today');});

Nå for å ringe konsollen til oppgaven, gjør vi ganske enkelt følgende:

 grynt si hei: Navn

Hvordan vi kan se plasserer vi navnet på oppgaven, og med et kolon skiller vi for å passere den nødvendige parameteren, i dette tilfellet navnet vi vil sende til oppgaven, la oss se hvordan det ser ut i konsollen vår:

Hva skjer nå hvis oppgaven vår trenger oss til å passere to eller flere parametere, ganske enkelt i koden til den samme legger vi dem til atskilt med kommaer som en funksjon JavaScript normalt, og når vi kaller dem i konsollen kan vi plassere dem med samme måte å skille på, la oss se en kode der vi utfører en oppgave som viser oss dette:

 grunt.registerTask ('add', function (value1, value2) {var sum = Number (value1) + Number (value2); grunt.log.writeln ('Resultatet av å legge til' + value1 + ' +' + value2 + ' er: '+ sum);});

La oss nå se hvordan det ser ut når vi kjører gjennom konsollen dette eksemplet med samtalen og svaret:

Noe interessant som vi kunne legge merke til er at vi bruker JavaScript Flatt og enkelt å definere behandlingen, bruken av dette språket er veldig viktig siden vi på denne måten vil kunne utvide kapasiteten vår til alt vi kan oppnå når vi bygger oppgavene våre med Grynte.
Det er mulig å bruke advarsler i våre oppgaver, med dette kan vi validere litt parametrene mottatt fra brukeren, for eksempel er vår tidligere oppgave en sum, men hvis vi setter noe annet enn et tall, vil operasjonen vår mislykkes, så vi kan gjør følgende: ved hjelp av metoden advare () Vi vil validere at begge parametrene er tall, og i tilfelle de ikke er det, vil vi starte en advarsel:

 grunt.registerTask ('add', function (value1, value2) {if (isNaN (Number (value1)))) {grunt.warn ('The first value' + value1 + 'must be a number.');} if ( isNaN (Number (verdi2))) {grunt.warn ('Den andre verdien' + verdi2 + 'må være et tall.');} Var sum = Number (verdi1) + Number (verdi2); grunt.log.writeln ( 'Resultatet av å legge til' + verdi1 + ' +' + verdi2 + 'er:' + sum);});

I vår omskrevne kode har vi validert at hvis resultatet av konverteringen til Antall () av parameterne er ikke et tall lansere metoden advare () eller advarsel, dette bryter tråden og viser meldingen, slik at vi kan unngå en feil oppgave. La oss se hvordan dette ser ut i konsollen vår når vi utfører oppgaven:

Som vi også merker kunnskapen om språket JavaScript Det er veldig viktig, så hvis vi er under nivået vi ønsker å nå, må vi øve og prøve å gjøre så mange øvelser som mulig for å forbedre våre ferdigheter.
Med dette har vi fullført denne opplæringen, slik vi ser opprettelsen av oppgaver med Grynte Det er ikke veldig komplekst, snarere logikken på tidspunktet for å definere dem hjelper oss med å lette forståelsen av bruken av verktøyet. Den sanne kompleksiteten er i definisjonen av vår egen logikk i øyeblikket for å vite hva vår oppgave vil gjøre og hvordan vi kan gjøre den så gjenbrukbar som mulig, siden hvis den ikke er det, vil vi jobbe forgjeves.