Sådan automatiserer du opgaver i Visual Studio Code

Ved hjælp af et byggeværktøj som Grunt eller Gulp kan du spare meget tid på udviklingsstadiet automatisere et par gentagne gange “Opgaver”. Hvis du vælger Visual Studio Code som din go-to code editor, kan din workflow være endnu mere strømlinet og til sidst være mere produktiv.

Bygget med Node.js i kerne, giver Visual Studio Code dig mulighed for Kør opgaverne uden at skulle forlade redigeringsvinduet. Og vi vil vise dig, hvordan du gør det i dette indlæg.

Lad os begynde.

Forudsætninger

Til at begynde med skal du have Node, NPM (Node Package Manager) og CLI (Command Line Interface) for det respektive build-værktøj, som alle er installeret i dit system. Hvis du er i tvivl om du har alle disse installeret, er det lige så nemt at kontrollere, at du skriver kommandolinjerne.

Jeg vil også antage, at filer og mapper i dit projekt er på deres rette sted, herunder config fil, som f.eks gulpfile.js eller Gruntfile.js hvis du bruger Grunt i stedet. Og projektafhængigheder registreret i package.json bør også installeres på dette tidspunkt.

Følgende er vores projektmapper og filer, der er oprettet med henblik på a demonstration i denne artikel. Dit projekt ville helt sikkert være meget anderledes; Du kan have flere eller færre filer.

. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

Vi udnytter Gulp som vores byggeværktøj i vores projekt. Vi har en række opgaver registreret i gulpfile.js som følger:

 var gulp = kræve ('gulp'); var uglify = kræver ('gulp-uglify'); var sass = kræver ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', funktion () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', funktion () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'compressed')) .pipe (gulp.dest (' ./css '));) ; gulp.task ('automatiser', funktion () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automate']); 

Der er specifikt fire opgaver, vi har specificeret:

• scripts: Opgaven, der vil kompilere vores JavaScript-filer samt minimere output via Gulp UglifyJS plugin.
• stilarter: Den opgave, der vil kompilere vores SCSS-filer til CSS samt komprimere output.
• automatisere: opgaven, der vil automatisere stilarter og scripts opgave selvom den indbyggede gulp holde øje nytte.
• Standard: opgaven, der løber de tre ovennævnte opgaver alle sammen på én gang.

Da byggeværktøjet i vores projekt er alle forberedt, kan vi nu også fortsætte med at automatisere disse opgaver, vi har defineret i gulpfile.js.

Men hvis du ikke er fortrolig med nogle af de nævnte værktøjer, anbefaler jeg dig stærkt at se nærmere på nogle af vores tidligere indlæg for at komme ind i emnet, inden du fortsætter videre.

• Sådan bruger du Grunt til at automatisere din arbejdsgang
• Kom i gang med Gulp.js
• Slaget om at bygge scripts: Gulp vs Grunt

Kør og automatiser opgaver

Løb og automatisering “Opgaver” i Visual Studio Code er ret ligetil. Start først Kommandopaletten ved at trykke på Shift + Cmd + P tastekombinationen eller gennem menulinjen, Vis> Kommandopaletten hvis det er mere praktisk for dig. Skriv derefter Opgaver, og vælg “Opgaver: Kør opgave” fra de få muligheder, der vises i resultatet.

Visual Studio Code er smart; Det ved, at vi bruger Gulp, afhent gulpfile.js, og afslør listen over opgaver, som vi har defineret i filen.

Her skal vi vælge Standard Opgave. SCSS stylesheets og JavaScripts-filen udarbejdes ved valg af denne opgave, og den vil også udløse automatisere Opgave, der vil tillade stilarter og scripts Opgave at køre autonomt fremad.

Når du ændrer en fil - et stylesheet eller en JavaScript-fil - bliver den automatisk kompileret. Visual Studio Code genererer også rettidige rapporter for enhver succes og fejl, der opstår i byggeoperationen.

Deep Intergration

Desuden kan vi integrere vores projekt i Visual Studio Code for at strømline vores arbejdsgang. Og integrering af vores opgaver i Visual Studio Code er nemt og hurtigt.

Start kommandopaletten og vælg “Konfigurer Opgave Runner”. Visual Studio Code vil give en liste over byggeværktøjer, som den understøtter. I dette tilfælde vælger vi “Gulp”, da det er det, vi bruger i vores projekt i denne artikel.

Visual Studio Code skulle nu have oprettet en ny fil med navnet tasks.json under .vscode i din projektmappe. tasks.json, på dette tidspunkt indeholder bare konfiguration.

Og som du kan se nedenfor, er opgaver Ejendommen er i øjeblikket bare en tom matrix.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["- no-color"], "opgaver": []

Udvid opgaver værdi som følger.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["-no-farve"], "opgaver": ["taskName" standard "," isBuildCommand ": true,

Det taskname angiver opgavens navn i vores gulpfile.js som vi gerne vil køre. Det isBuildCommand ejendom definerer Standard kommando som “Byg” kommando. Nu, i stedet for at gå rundt på kommandopaletten, kan du blot trykke på tastekombinationen Skift + Cmd + B.

Alternativt kan du vælge “Kør Build Task” af opgaver i Opgaver i kommandopaletten.

Afslutter

Jeg tror, ​​at Visual Studio Code er en kode editor med en god fremtid. Det er hurtigt og bygget med nogle praktiske funktioner ud af kassen, herunder en, som vi har vist i denne artikel.

Vi har set, hvordan man kører en opgave fra Gulp; Du kan også bruge Grunt i stedet. Vi har set hvordan vi integrerer opgaven i Visual Studio Code og kører med en nøglekombination, som gør vores arbejdsgang mere strømlinet.

Forhåbentlig finder du denne artikel nyttigt som en reference til at køre opgaver, og glem ikke at tjekke vores tidligere artikler om flere tip for at få mest muligt ud af Visual Studio Code.

• Visual Studio Code: 5 Awesome funktioner, der gør det til en Frontrunner
• Sådan tilpasses Visual Studio Code
• 8 Kraftige Visual Studio-kodeudvidelser til front-end-udviklere
• Visual Studio Code: Øget produktivitet via Key Binding Management
• Påvirkningen af ​​Microsoft Inclusive Design i Visual Studio Code