Hur man automatiserar uppgifter i Visual Studio Code

Med hjälp av ett byggverktyg som Grunt eller Gulp kan du spara mycket tid på utvecklingsstadiet av automatiserar några repeterande “uppgifter”. Om du väljer Visual Studio-kod som din go-to-kodredigerare kan ditt arbetsflöde bli ännu mer strömlinjeformat och så småningom vara mer produktivt.

Byggd med Node.js i kärnan låter Visual Studio Code dig kör uppgiften utan att behöva lämna redigeringsfönstret. Och vi ska visa dig hur du gör det i det här inlägget.

Låt oss börja.

Förutsättningar

Till att börja med måste du ha Node, NPM (Node Package Manager) och CLI (Command Line Interface) för respektive byggverktyg som alla är installerade i ditt system. Om du är osäker på om du har alla dessa installerade, är det så enkelt att verifiera det som att skriva kommandoraden.

Jag kommer också att anta att filer och kataloger i ditt projekt ligger på rätt plats, inklusive config fil, till exempel gulpfile.js eller Gruntfile.js om du använder Grunt istället. Och projektberoende registrerade i package.json bör också installeras vid denna punkt.

Följande är våra projektkataloger och filer, skapade för a demonstration i den här artikeln. Ditt projekt skulle säkert vara mycket annorlunda; du kan ha fler eller färre filer.

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

Vi använder Gulp som vårt byggverktyg i vårt projekt. Vi har ett antal uppgifter registrerade i gulpfile.js som följer:

 var gulp = kräver ("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 ('skript', funktion () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stilar', funktion () return gulp.src (sassSrc). pip (sass (outputStyle: 'compressed')). pip (gulp.dest ('./css'));) ; gulp.task ("automatisera", funktion () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automate']); 

Det finns specifikt fyra uppgifter som vi har angivit:

• skript: Uppgiften som kommer att kompilera våra JavaScript-filer samt minimera utmatningen via Gulp UglifyJS-plugin.
• stilar: Uppgiften som kommer att kompilera våra SCSS-filer till CSS samt komprimera utgången.
• automatisera: Uppgiften som kommer att automatisera stilar och skript uppgift trots det inbyggda gulpet Kolla på verktyg.
• standard: Uppgiften som kommer att driva de tre ovannämnda uppgifterna tillsammans i taget.

Eftersom byggverktyget i vårt projekt är allt förberett, kan vi nu också fortsätta att automatisera de uppgifter vi definierat inom gulpfile.js.

Men om du inte är bekant med något av de nämnda verktygen rekommenderar jag starkt att du tittar på några av våra tidigare inlägg för att komma in i ämnet innan du fortsätter vidare.

• Så här använder du Grunt för att automatisera ditt arbetsflöde
• Komma igång med Gulp.js
• Slaget vid byggnadsskript: Gulp vs Grunt

Kör och automatisera uppgifter

Löpning och automatisering “uppgifter” i Visual Studio Code är ganska enkelt. Först, starta Command Palette genom att trycka på tangentkombinationen Shift + Cmd + P eller genom menyraden, Visa> Kommandotolett om det är bekvämare för dig. Skriv sedan uppgifter, och välj “Uppgifter: Kör uppgift” från de få alternativ som visas i resultatet.

Visual Studio Code är smart; Det vet att vi använder Gulp, plocka upp gulpfile.js, och avslöja listan över uppgifter som vi har definierat i filen.

Här, låt oss välja standard Uppgift. SCSS stilark och JavaScripts-filen kommer att sammanställas vid valet av denna uppgift, och det kommer också att utlösa automatisera Uppgift som tillåter stilar och skript Uppgift att springa autonomt framåt.

När du ändrar en fil - ett stilark eller en JavaScript-fil - kommer den automatiskt att kompileras. Visual Studio Code genererar också aktuella rapporter för varje framgång och fel som uppstår i byggoperationen.

Deep Intergration

Dessutom kan vi integrera vårt projekt i Visual Studio Code för att effektivisera vårt arbetsflöde. Att integrera våra uppgifter i Visual Studio Code är enkelt och snabbt.

Starta kommandopaletten och välj “Konfigurera uppgiftslöpare”. Visual Studio Code kommer att ge en lista över byggverktyg som den stöder. I det här fallet väljer vi “Klunk”, eftersom det är det vi använder i vårt projekt i den här artikeln.

Visual Studio Code skulle nu ha skapat en ny fil som heter tasks.json under .vscode i din projektkatalog. tasks.json, vid denna tidpunkt innehåller bara konfiguration.

Och som du kan se nedan, uppgifter egendom i är för närvarande bara en tom matris.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["- ingen färg"], "uppgifter": []

Utöka uppgifter värdet enligt följande.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["-no-färg"], "uppgifter": ["taskName" standard "," isBuildCommand ": true,

De arbetsnamn specificerar uppgiftsnamnet i vår gulpfile.js som vi skulle vilja springa. De isBuildCommand egendom definierar standard kommando som “Bygga” kommando. Nu, istället för att gå runt kommandopalen, kan du helt enkelt trycka på tangentkombinationen Shift + Cmd + B.

Alternativt kan du välja “Kör bygga uppgiften” av sökresultatet i uppdragspanelen.

Avslutar

Jag tror att Visual Studio Code är en kodredaktör med en bra framtid. Det är snabbt och byggt med några praktiska funktioner ur lådan, inklusive en som vi har visat i den här artikeln.

Vi har sett hur man kör ett uppdrag från Gulp; du kan också använda Grunt istället. Vi har sett hur vi integrerar uppgiften i Visual Studio Code och kör med en nyckelkombination, vilket gör vårt arbetsflöde mer strömlinjeformat.

Förhoppningsvis hittar du den här artikeln som en referens för att köra byggnadsuppgifter och glöm inte att kolla in våra tidigare artiklar om mer tips för att få ut det mesta av Visual Studio Code.

• Visual Studio Code: 5 Fantastiska funktioner som gör det till en Frontrunner
• Så här anpassar du Visual Studio Code
• 8 Kraftfulla Visual Studio Code Extensions för Front-End Developers
• Visual Studio Code: Ökad produktivitet via Key Binding Management
• Påverkan av Microsoft Inclusive Design i Visual Studio Code