Kā automatizēt uzdevumus Visual Studio kodā

Izmantojot veidošanas rīku, piemēram, Grunt vai Gulp, jūs varat ietaupīt daudz laika attīstības stadijā automatizējot dažas atkārtojas “Uzdevumi”. Ja izvēlaties Visual Studio kodu kā pārejas kodu redaktoru, jūsu darbplūsma varētu būt vēl vienkāršāka un, iespējams, būt produktīvāka.

Visual Studio kods ir veidots, izmantojot tā galveno elementu izpildiet uzdevumus, neizejot no redaktora loga. Un mēs jums parādīsim, kā to darīt šajā amatā.

Sāksim.

Priekšnosacījumi

Vispirms jums ir jābūt Node, NPM (Node Package Manager) un atbilstošā būvniecības rīka CLI (Command Line Interface) komandai, kas ir instalēta jūsu sistēmā. Ja neesat pārliecināts, vai jums ir visas šīs instalētās, pārbaudiet, vai tas ir tikpat vienkārši kā komandrindu rakstīšana.

Es arī pieņemšu, ka jūsu projektā esošie faili un direktoriji atrodas pareizajā vietā, ieskaitot konfigur failu, piemēram, gulpfile.js vai Gruntfile.js ja izmantojat Grunt. Ir reģistrētas projekta atkarības package.json būtu arī jāinstalē šajā brīdī.

Mūsu projekta direktoriji un faili, kas izveidoti a demonstrācija šajā rakstā. Jūsu projekts noteikti būtu daudz atšķirīgs; jums var būt vairāk vai mazāk failu.

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

Mēs izmantojam Gulp kā mūsu būvniecības rīku mūsu projektā. Mums ir vairāki uzdevumi, kas reģistrēti gulpfile.js sekojoši:

 var gulp = pieprasīt (“gulp”); var uglify = pieprasīt (“gulp-uglify”); var sass = nepieciešams (“gulp-sass”); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('skripti', funkcija () atgriezties gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stili', funkcija () atgriezties gulp.src (sassSrc) .pipe (sass (outputStyle: 'saspiests'))) .pipe (gulp.dest ('./css'));) ; gulp.task ('automatizēt', funkcija () gulp.watch ([sassSrc, jsSrc], ['skripti', 'stili']);); gulp.task ('noklusējuma', ['skripti', 'stili', 'automatizēt')); 

Ir noteikti četri uzdevumi, kurus esam norādījuši:

• skriptus: uzdevums, kas apkopos mūsu JavaScript failus, kā arī samazinās izeju caur Gulp UglifyJS spraudni.
• stili: uzdevums, kas apkopos mūsu SCSS failus CSS, kā arī saspiest izeju.
• automatizēt: uzdevums, kas automatizēs stili un skriptus uzdevums, ja iebūvēts gulp skatīties lietderība.
• noklusējuma: uzdevums, kurā visi trīs iepriekš minētie uzdevumi tiks veikti kopā.

Tā kā mūsu projekta būvniecības rīks ir sagatavots, mēs varam arī turpināt automatizēt šos uzdevumus, ko esam definējuši gulpfile.js.

Tomēr, ja neesat iepazinies ar kādu no minētajiem rīkiem, es ļoti iesakām apskatīt dažus no mūsu iepriekšējiem ziņojumiem, lai iegūtu jums šo tēmu, pirms turpināt darbu.

• Kā izmantot Grunt, lai automatizētu savu darbplūsmu
• Darba sākšana ar Gulp.js
• Izveidot skriptu kaujas: Gulp vs Grunt

Palaist un automatizēt uzdevumus

Darbība un automatizācija “Uzdevumi” Visual Studio Code ir diezgan vienkāršs. Pirmkārt, palaidiet Komandu palete nospiežot taustiņu kombināciju Shift + Cmd + P vai izvēlnes joslā, Skats> Komandu palete ja tas ir jums ērtāk. Pēc tam ierakstiet Uzdevumi, un izvēlieties “Uzdevumi: palaist uzdevumu” no dažiem rezultātiem, kas parādīti rezultātu.

Visual Studio kods ir gudrs; tā zina, ka mēs izmantojam Gulp, uzņemt gulpfile.js, un atklāt to uzdevumu sarakstu, kurus esam definējuši failā.

Šeit izvēlieties noklusējuma Uzdevums. SCSS stilu un JavaScripts failu apkopos, izvēloties šo uzdevumu, un tas arī aktivizēs automatizēt Uzdevums, kas ļaus stili un skriptus Uzdevums darboties autonomi.

Mainot failu - stilu vai JavaScript failu - tas tiks automātiski apkopots. Visual Studio Code arī nodrošina savlaicīgus ziņojumus par katru panākumu un kļūdām, kas rodas būvniecības operācijā.

Dziļa integrācija

Turklāt mēs varam integrēt savu projektu Visual Studio Code, lai racionalizētu mūsu darbplūsmu. Un mūsu uzdevumu integrēšana Visual Studio kodā ir vienkārša un ātra.

Uzsākt komandu paleti un atlasiet “Konfigurējiet uzdevumu skrējēju”. Visual Studio kods sniegs sarakstu ar būvniecības rīku, ko tas atbalsta. Šajā gadījumā mēs izvēlamies “Gulp”, tā kā mēs to izmantojam šajā projektā.

Visual Studio Code tagad būtu jāizveido jauns fails ar nosaukumu uzdevumi.json zem .vscode jūsu projekta direktorijā. uzdevumi.json, šajā brīdī ir tukša konfigurācija.

Un kā jūs varat redzēt zemāk, uzdevumus īpašums pašlaik ir tikai tukšs masīvs.

"versija": "0.1.0", "komanda": "gulp", "isShellCommand": taisnība, "args": ["--no-color"], "uzdevumi": []

Paplašināt uzdevumus vērtību.

"version": "0.1.0", "komanda": "gulp", "isShellCommand": taisnība, "args": ["--no-color"], "uzdevumi": ["uzdevuma nosaukums": noklusējums "," isBuildCommand ": true,]

The uzdevuma nosaukums norāda uzdevuma nosaukumu mūsu gulpfile.js mēs vēlētos darboties. The isBuildCommand īpašums nosaka noklusējuma komandu kā “Būvēt” komandu. Tagad, nevis iet pa komandu paleti, varat vienkārši nospiest taustiņu kombināciju Shift + Cmd + B.

Varat arī izvēlēties “Run Build Task” no uzdevumu meklēšanas rezultāta komandu paletē.

Iesaiņošana

Es domāju, ka Visual Studio Code ir koda redaktors ar lielu nākotni. Tas ir ātrs un uzbūvēts ar dažām ērtajām funkcijām no kastes, ieskaitot to, ko mēs esam parādījuši šajā rakstā.

Mēs esam redzējuši, kā palaist uzdevumu no Gulp; varat izmantot arī Grunt. Mēs esam redzējuši, kā integrēt uzdevumu Visual Studio kodā un palaist ar atslēgu kombināciju, kas padara mūsu darbplūsmu vienkāršāku.

Cerams, ka šis raksts noderēs kā atsauce uz būvniecības uzdevumu izpildi, un neaizmirstiet apskatīt mūsu iepriekšējos rakstus, lai iegūtu vairāk padomu, kā izmantot Visual Studio kodu.

• Visual Studio kods: 5 Awesome Features, kas padara to par priekšgājēju
• Kā pielāgot Visual Studio kodu
• 8 Jaudīgi Visual Studio koda paplašinājumi priekšgala izstrādātājiem
• Visual Studio kods: produktivitātes paaugstināšana, izmantojot atslēgu saistīšanas vadību
• Microsoft iekļaujošā dizaina ietekme uz Visual Studio kodu