Kako avtomatizirati naloge v kodi Visual Studio

Uporaba orodja za gradnjo, kot je Grunt ali Gulp, vam lahko prihrani veliko časa razvojne faze avtomatizirati nekaj ponavljajočih se “Naloge”. Če ste se odločili za kodo Visual Studio kot urejevalnik za prehodno kodo, bi bil lahko vaš potek dela še bolj poenostavljen in sčasoma bolj produktiven.

Visual Studio, ki je zgrajen z Node.js v svojem jedru, vam omogoča zaženite naloge, ne da bi morali zapustiti okno urejevalnika. Pokazali vam bomo, kako to storite v tem mestu.

Začnimo.

Predpogoji

Za začetek morate imeti nameščeno Node, NPM (upravljalnik paketov vozlišč) in CLI (vmesnik ukazne vrstice) ustreznega orodja za gradnjo, ki je nameščeno v vašem sistemu. Če niste prepričani, ali imate vse te nameščene, je preverjanje enako preprosto kot vnašanje ukaznih vrstic.

Predvidevam tudi, da so datoteke in imeniki v vašem projektu na pravem mestu, vključno z config datoteko, kot je gulpfile.js ali Gruntfile.js če namesto tega uporabite Grunt. In projektne odvisnosti so registrirane v package.json namestiti tudi na tej točki.

Naslednji so naši projektni imeniki in datoteke, ustvarjeni za namen a predstavitev v tem članku. Vaš projekt bi bil veliko drugačen; morda imate več ali manj datotek.

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

Gulp uporabljamo kot orodje za gradnjo v našem projektu. Imamo več nalog, registriranih v gulpfile.js kot sledi:

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

Natančno smo določili štiri naloge:

skripte: naloga, ki bo zbrala naše JavaScript datoteke in minifiy izhod skozi Gulp UglifyJS plugin.
stilov: naloga, ki bo zbrala naše SCSS datoteke v CSS in stisnila izhod.
avtomatizirati: naloga, ki bo avtomatizirala stilov in skripte opravilo, čeprav je vgrajen gutljaj gledam uporabnost.
privzeto: naloga, ki bo izvajala vse tri navedene naloge skupaj.

Ker je orodje za gradnjo v našem projektu pripravljeno, lahko sedaj tudi nadaljujemo z avtomatizacijo teh nalog, ki smo jih definirali v okviru projekta gulpfile.js.

Če pa ne poznate nobenega od omenjenih orodij, vam priporočam, da si ogledate nekaj naših prejšnjih objav, da se boste lahko lotili te teme, preden nadaljujete..

Kako uporabljati Grunt za avtomatizacijo vašega delovnega toka
Kako začeti z Gulp.js
Bitka pri gradnji skript: Gulp vs Grunt

Zaženite in avtomatizirajte opravila

Vodenje in avtomatizacija “Naloge” v Visual Studio Code je precej preprosta. Najprej zaženite Ukazna paleta s kombinacijo tipk Shift + Cmd + P ali prek menijske vrstice, Pogled> Ukazna paleta če vam to ustreza. Nato vnesite Naloge, in izberite “Opravila: Zaženi opravilo” od nekaj možnosti, prikazanih v rezultatu.

Visual Studio Code je pametna; ve, da uporabljamo Gulpa, poberemo gulpfile.js, in razkrije seznam nalog, ki smo jih definirali v datoteki.

Seznam nalog, registriranih v. \ T `gulpfile.js`

V tem primeru izberite privzeto Naloga. Datoteke slogov SCSS in datoteka JavaScripts bodo prevedene ob izbiri te naloge in sprožile bodo tudi avtomatizirati Naloga, ki bo omogočila stilov in skripte Naloga za samostojno izvajanje.

Pri spreminjanju datoteke - slogovne datoteke ali datoteke JavaScript - bo samodejno prevedena. Visual Studio Code prav tako ustvari pravočasna poročila za vsak uspeh in napake, ki se pojavijo v operaciji gradnje.

Globoka integracija

Poleg tega lahko projekt vključimo v Visual Studio Code, da bi racionalizirali potek dela. In vključevanje naših nalog v Visual Studio Code je enostavno in hitro.

Zaženite paleto ukazov in izberite “Konfigurirajte vodilo opravil”. Visual Studio Code bo podal seznam orodja za gradnjo, ki ga podpira. V tem primeru izberemo “Gulp”, ker je to tisti, ki ga uporabljamo v našem projektu v tem članku.

Koda Visual Studio bi morala ustvariti novo datoteko z imenom tasks.json Spodaj .vscode v imeniku projekta. tasks.json, na tej točki vsebuje golo konfiguracijo.

Kot lahko vidite spodaj naloge lastnost je trenutno samo prazno polje.

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

Razširite naloge kot sledi.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "task": ["taskName": " privzeto "," isBuildCommand ": true,]

The ime opravila določa ime naloge v naši gulpfile.js ki bi jih radi vodili. The isBuildCommand lastnost opredeljuje privzeto ukaz kot “Build” ukaz. Zdaj, namesto da obkrožite ukazno paleto, lahko preprosto pritisnete kombinacijo tipk Shift + Cmd + B.

Izberete lahko tudi možnost “Zaženi nalogo gradnje” rezultatov iskanja Opravila v paleti ukazov.

Zavijanje

Mislim, da je Visual Studio Code urejevalnik kod z veliko prihodnostjo. To je hitro in zgrajena z nekaj priročnih funkcij iz škatle, vključno s tisto, ki smo jih pokazali v tem članku.

Videli smo, kako izvajati Task iz Gulpa; lahko uporabite tudi Grunt. Videli smo, kako vključiti nalogo v kodo Visual Studio in jo zagnati s kombinacijo tipk, zaradi česar je naš potek dela bolj poenostavljen.

Upajmo, da je ta članek koristen kot referenca za zagon nalog za izdelavo, in ne pozabite preveriti naših prejšnjih člankov, kjer najdete več nasvetov, da bi kar najbolje izkoristili kodo Visual Studio.

Visual Studio Code: 5 Awesome funkcije, ki naredijo Frontrunner
Kako prilagoditi kodo Visual Studio
8 Zmogljive razširitve kode Visual Studio za Front-End razvijalce
Koda Visual Studio: Povečanje produktivnosti s pomočjo upravljanja z vezavo ključev
Vpliv Microsoftovega inkluzivnega oblikovanja v kodo Visual Studio