Bruk Grunt i ASP.NET Core (2023)

Grunt er en JavaScript-oppgaveløper som automatiserer skriptminifisering, TypeScript-kompilering, "lint"-verktøy for kodekvalitet, CSS-pre-prosessorer og omtrent alle repeterende oppgaver som må gjøres for å støtte klientutvikling. Grunt støttes fullt ut i Visual Studio.

Dette eksemplet bruker et tomt ASP.NET Core-prosjekt som utgangspunkt for å vise hvordan du kan automatisere klientbyggingsprosessen fra bunnen av.

Det ferdige eksemplet renser måldistribusjonskatalogen, kombinerer JavaScript-filer, sjekker kodekvalitet, kondenserer JavaScript-filinnhold og distribuerer til roten av webapplikasjonen din. Vi vil bruke følgende pakker:

• grynte: Grunt task runner-pakken.

• grynte-bidra-rent: En plugin som fjerner filer eller kataloger.

• grynt-bidrag-jshint: En plugin som vurderer JavaScript-kodekvalitet.

• grynt-bidrag-konkat: En plugin som slår sammen filer til en enkelt fil.

• grynte-bidra-uglifa: En plugin som minimerer JavaScript for å redusere størrelsen.

• grynt-bidrag-klokke: En plugin som overvåker filaktivitet.

Forbereder søknaden

For å begynne, sett opp en ny tom nettapplikasjon og legg til TypeScript-eksempelfiler. TypeScript-filer kompileres automatisk til JavaScript ved å bruke standard Visual Studio-innstillinger og vil være vårt råmateriale for å behandle med Grunt.

1. Opprett en ny i Visual StudioASP.NET webapplikasjon.

2. INytt ASP.NET-prosjektdialogboksen velger du ASP.NET CoreTømmemal og klikk på OK-knappen.

3. Gå gjennom prosjektstrukturen i Solution Explorer. De\kildemappe inkluderer tomwwwrootogAvhengigheternoder.

   

4. Legg til en ny mappe med navnetTypeScripttil prosjektkatalogen din.

5. Før du legger til filer, sørg for at Visual Studio har merket av for alternativet 'kompiler ved lagring' for TypeScript-filer. Navigere tilVerktøy>Alternativer>Tekstredigerer>Typeskrift>Prosjekt:

   

6. Høyreklikk påTypeScriptkatalog og velgLegg til > Nytt elementfra kontekstmenyen. VelgJavaScript-filelement og navngi filenSmaker.ts(legg merke til *.ts-utvidelsen). Kopier linjen med TypeScript-kode nedenfor inn i filen (når du lagrer, en nyTastes.jsfilen vises med JavaScript-kilden).

   enum smaker { søtt, surt, salt, bittert }

7. Legg til en andre fil tilTypeScriptkatalog og navngi denMat.ts. Kopier koden nedenfor inn i filen.

   klasse Mat { konstruktør(navn: streng, kalorier: tall) { dette._navn = navn; this._calories = kalorier; } privat _navn: streng; få Navn() { return this._name; } private _kalorier: tall; get Calories() { return this._calories; } private _taste: Smaker; get Taste(): Tastes { return this._taste } set Taste(value: Tastes) { this._taste = verdi; }}

Konfigurerer NPM

Deretter konfigurerer du NPM til å laste ned grynt- og grynt-oppgaver.

1. I Solution Explorer høyreklikker du prosjektet og velgerLegg til > Nytt elementfra kontekstmenyen. VelgNPM-konfigurasjonsfilelement, la standardnavnet stå,package.json, og klikk påLegg tilknapp.

2. Ipackage.jsonfil, inne iavhengigheterobjekt bukseseler, skriv inn "grynt". Plukke utgryntefra Intellisense-listen og trykk Enter-tasten. Visual Studio vil sitere grynt-pakkenavnet og legge til et kolon. Til høyre for kolon, velg den siste stabile versjonen av pakken fra toppen av Intellisense-listen (trykkCtrl-mellomromhvis Intellisense ikke vises).

   

   Merk

   NPM brukersemantisk versjoneringå organisere avhengigheter. Semantisk versjonering, også kjent som SemVer, identifiserer pakker med nummereringsskjemaet ... Intellisense forenkler semantisk versjonering ved å vise bare noen få vanlige valg. Det øverste elementet i Intellisense-listen (0.4.5 i eksempelet ovenfor) regnes som den siste stabile versjonen av pakken. Symbolet (^) samsvarer med den nyeste hovedversjonen og tilde (~) samsvarer med den nyeste mindre versjonen. SeNPM semver versjon parser referansesom en guide til den fulle uttrykksevnen som SemVer gir.

3. Legg til flere avhengigheter for å laste grunt-contrib-*-pakker forren,jsint,concat,stygge, ogsesom vist i eksempelet nedenfor. Versjonene trenger ikke samsvare med eksemplet.

   "devDependencies": { "grunt": "0.4.5", "grunt-contrib-clean": "0.6.0", "grunt-contrib-jshint": "0.11.0", "grunt-contrib-concat" : "0.5.1", "grunt-contrib-uglify": "0.8.0", "grunt-contrib-watch": "0.6.1"}

4. Lagrepackage.jsonfil.

Pakkene til hveravhengigheterelementet vil lastes ned, sammen med alle filer som hver pakke krever. Du finner pakkefilene inode_moduleskatalogen ved å aktivereVis alle filerknapp innLøsningsutforsker.

Konfigurerer Grunt

Grunt er konfigurert med et manifest som heterGruntfile.jssom definerer, laster og registrerer oppgaver som kan kjøres manuelt eller konfigureres til å kjøre automatisk basert på hendelser i Visual Studio.

1. Høyreklikk prosjektet og velgLegg til>Ny gjenstand. VelgJavaScript-filelementmal, endre navnet tilGruntfile.js, og klikk påLegg tilknapp.

2. Legg til følgende kode tilGruntfile.js. DeinitConfigfunksjonen setter alternativer for hver pakke, og resten av modulen laster og registrerer oppgaver.

   module.exports = funksjon (grunt) { grunt.initConfig({ });};

3. Inne iinitConfigfunksjon, legg til alternativer forrenoppgave som vist i eksempeletGruntfile.jsunder. Derenoppgaven godtar en rekke katalogstrenger. Denne oppgaven fjerner filer frawwwroot/libog fjerner hele/tempkatalog.

   module.exports = function (grunt) { grunt.initConfig({ clean: ["wwwroot/lib/*", "temp/"], });};

4. UnderinitConfigfunksjon, legg til et anrop tilgrunt.loadNpmTasks. Dette vil gjøre oppgaven kjørbar fra Visual Studio.

   grunt.loadNpmTasks("grunt-contrib-clean");

5. LagreGruntfile.js. Filen skal se omtrent ut som skjermbildet nedenfor.

   

6. HøyreklikkGruntfile.jsog velgTask Runner Explorerfra kontekstmenyen. DeTask Runner Explorervinduet åpnes.

   

7. Bekreft detrenviser underOppgaveriTask Runner Explorer.

   

8. Høyreklikk på den rene oppgaven og velgLøpefra kontekstmenyen. Et kommandovindu viser fremdriften til oppgaven.

   

   Merk

   Det er ingen filer eller kataloger å rense ennå. Hvis du vil, kan du opprette dem manuelt i Solution Explorer og deretter kjøre den rene oppgaven som en test.

9. IinitConfigfunksjon, legg til en oppføring forconcatved å bruke koden nedenfor.

   Desrcegenskapsarray viser filer som skal kombineres, i den rekkefølgen de skal kombineres. Dedestegenskapen tildeler banen til den kombinerte filen som er produsert.

   concat: { all: { src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'], dest: 'temp/combined.js' }},

   Merk

   Dealleegenskapen i koden ovenfor er navnet på et mål. Mål brukes i noen Grunt-oppgaver for å tillate flere byggemiljøer. Du kan se de innebygde målene ved hjelp av IntelliSense eller tilordne dine egne.

10. Legg tiljsintoppgave ved å bruke koden nedenfor.

    Den jshintkodekvalitetverktøyet kjøres mot hver JavaScript-fil som finnes itempkatalog.

    jshint: { files: ['temp/*.js'], options: { '-W069': false, }},

    Merk

    Alternativet "-W069" er en feil produsert av jshint når JavaScript bruker parentessyntaks for å tilordne en egenskap i stedet for punktnotasjon, dvs.Smaker["Søtt"]i stedet forSmaker.Søtt. Alternativet slår av advarselen for å la resten av prosessen fortsette.

11. Legg tilstyggeoppgave ved å bruke koden nedenfor.

    Oppgaven minimerercombined.jsfilen funnet i temp-katalogen og oppretter resultatfilen i wwwroot/lib etter standard navnekonvensjon.min.js.

    uglify: { alle: { src: ['temp/combined.js'], dest: 'wwwroot/lib/combined.min.js' }},

12. Under oppfordringen tilgrunt.loadNpmTaskssom lastergrynte-bidra-rent, inkluderer samme kall for jshint, concat og uglify ved å bruke koden nedenfor.

    grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');

13. LagreGruntfile.js. Filen skal se omtrent ut som eksemplet nedenfor.

    

14. Legg merke til atTask Runner ExplorerOppgavelisten inkludererren,concat,jsintogstyggeoppgaver. Kjør hver oppgave i rekkefølge og observer resultatene iLøsningsutforsker. Hver oppgave skal kjøre uten feil.

    

    Concat-oppgaven oppretter en nycombined.jsfilen og plasserer den i temp-katalogen. Dejsintoppgaven kjører ganske enkelt og produserer ikke utdata. Destyggeoppgaven skaper en nykombinert.min.jsfil og plasserer den iwwwroot/lib. Etter ferdigstillelse skal løsningen se omtrent ut som skjermbildet nedenfor:

    

    Merk

    For mer informasjon om alternativene for hver pakke, besøkhttps://www.npmjs.com/og slå opp pakkenavnet i søkeboksen på hovedsiden. For eksempel kan du slå opp pakken grunt-contrib-clean for å få en dokumentasjonslenke som forklarer alle parameterne.

Alle sammen nå

Bruk GruntregisterTask()metode for å kjøre en rekke oppgaver i en bestemt sekvens. For for eksempel å kjøre eksempeltrinnene ovenfor i rekkefølgen clean -> concat -> jshint -> uglify, legg til koden nedenfor i modulen. Koden skal legges til samme nivå som loadNpmTasks() kaller, utenfor initConfig.

grunt.registerTask("all", ['clean', 'concat', 'jshint', 'uglify']);

Den nye oppgaven vises i Task Runner Explorer under Alias ​​Tasks. Du kan høyreklikke og kjøre den på samme måte som andre oppgaver. Dealleoppgaven vil kjøreren,concat,jsintogstygge, i rekkefølge.

Ser etter endringer

ENseoppgaven holder øye med filer og kataloger. Klokken utløser oppgaver automatisk hvis den oppdager endringer. Legg til koden nedenfor i initConfig for å se etter endringer i *.js-filer i TypeScript-katalogen. Hvis en JavaScript-fil endres,sevil kjørealleoppgave.

se: { filer: ["TypeScript/*.js"], oppgaver: ["alle"]}

Legg til en samtale tilloadNpmTasks()å viseseoppgave i Task Runner Explorer.

grunt.loadNpmTasks('grunt-contrib-watch');

Høyreklikk på vaktoppgaven i Task Runner Explorer og velg Kjør fra hurtigmenyen. Kommandovinduet som viser vaktoppgaven som kjører, vil vise en "Venter..."-melding. Åpne en av TypeScript-filene, legg til et mellomrom og lagre filen. Dette vil utløse vaktoppgaven og utløse de andre oppgavene til å kjøre i rekkefølge. Skjermbildet nedenfor viser en prøvekjøring.

Binding til Visual Studio-hendelser

Med mindre du ønsker å starte oppgavene manuelt hver gang du jobber i Visual Studio, bind oppgavene tilFør bygging,Etter Build,Ren, ogProsjekt åpentarrangementer.

Bindeseslik at den kjører hver gang Visual Studio åpnes. I Task Runner Explorer, høyreklikk på vaktoppgaven og velgBindinger>Prosjekt åpentfra kontekstmenyen.

Last ned og last prosjektet på nytt. Når prosjektet laster inn igjen, begynner vaktoppgaven å kjøre automatisk.

Sammendrag

Grunt er en kraftig oppgaveløper som kan brukes til å automatisere de fleste klientbyggingsoppgaver. Grunt utnytter NPM til å levere pakkene sine, og har verktøyintegrasjon med Visual Studio. Visual Studios Task Runner Explorer oppdager endringer i konfigurasjonsfiler og gir et praktisk grensesnitt for å kjøre oppgaver, se løpende oppgaver og binde oppgaver til Visual Studio-hendelser.