Kuidas automatiseerida ülesandeid Visual Studio koodis

Rakendustööriista, nagu Grunt või Gulp, kasutamine võib säästa palju arendusetappi automatiseerides mõned korduvad “Ülesanded”. Kui valite oma koodikoodi redigeerijaks Visual Studio koodi, võib teie töövoog olla veelgi sujuvam ja olla tulemuslikum.

Visual Studio Code võimaldab teil luua selle põhiosa koos Node.js'iga käivitage ülesanded ilma redaktoriaknast lahkumata. Ja me näitame teile, kuidas seda sellel ametikohal teha.

Alustagem.

Eeltingimused

Kõigepealt peate oma süsteemis olema paigaldatud kogu vastava tööriista Node, NPM (Node Package Manager) ja CLI (Command Line Interface). Kui te pole kindel, kas teil on kõik need installitud, siis on selle kontrollimine sama lihtne kui käsurealt.

Ma eeldan ka, et teie projekti failid ja kataloogid on õiges kohas, sealhulgas config fail, näiteks gulpfile.js või Gruntfile.js kui kasutate Grunti. Ja projekti sõltuvused on registreeritud package.json peaks olema ka paigaldatud.

Järgnevalt on meie projekti kataloogid ja failid, mis on loodud a meeleavaldus käesolevas artiklis. Teie projekt oleks kindlasti palju erinev; teil võib olla rohkem või vähem faile.

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

Me kasutame Gulpit meie ehitamisvahendina meie projektis. Meil on mitmeid ülesandeid, mis on registreeritud gulpfile.js järgnevalt:

 var gulp = vaja ('gulp'); var uglify = vaja ('gulp-uglify'); var sass = vaja ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('skriptid', funktsioon () tagasi gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stiilid', funktsioon () tagasi gulp.src (sassSrc) .pipe (sass (outputStyle: 'pressitud'))) .pipe (gulp.dest ('./css'));) ; gulp.task ('automatiseeri', funktsioon () gulp.watch ([sassSrc, jsSrc], ['skriptid', 'stiilid'));); gulp.task ('vaikimisi', ['skriptid', 'stiilid', 'automatiseeri')); 

Oleme täpselt määranud neli ülesannet:

• skriptid: ülesanne, mis koostab meie JavaScript-failid ning minipilgib Gulp UglifyJS pluginaga.
• stiilid: ülesanne, mis koondab meie SCSS-failid CSS-sse ning kompresseerib väljundi.
• automatiseerida: ülesanne, mis automatiseerib stiilid ja skriptid ülesanne sisseehitatud sisemuses vaata kasulikkust.
• vaikimisi: ülesanne, mis käivitab kõik kolm ülalnimetatud ülesannet korraga.

Kuna meie projekti ehitustööriist on kõik valmis, saame nüüd ka neid ülesandeid automatiseerida gulpfile.js.

Siiski, kui te ei tunne mainitud tööriistadega töötamist, soovitan teil uurida mõnda meie eelmist postitust, enne kui jätkate teemat.

• Kuidas kasutada Gruntit töövoo automatiseerimiseks
• Gulp.jsiga alustamine
• Ehitamise skriptide lahing: Gulp vs Grunt

Käivitage ja automatiseerige ülesandeid

Jooksmine ja automatiseerimine “Ülesanded” Visual Studio koodis on üsna lihtne. Esiteks käivitage Käskude palett vajutades klahvikombinatsiooni Shift + Cmd + P või menüüribal, Vaade> Käsupalett kui see on teile mugavam. Seejärel tippige Ülesanded, ja valige “Ülesanded: käivitage ülesanne” vähesest tulemuste arvust.

Visual Studio kood on arukas; ta teab, et me kasutame Gulpi, kiirenemist gulpfile.js, ja avage failide loend, mida me oleme defineerinud.

Siin valime vaikimisi Ülesanne. Selle ülesande valimisel koostatakse SCSS-stiililehed ja JavaScripts-fail ning see käivitab ka automatiseerida Ülesanne, mis võimaldab stiilid ja skriptid Ülesanne käivitada iseseisvalt edasi.

Faili - stiili või JavaScript-faili muutmisel - koostatakse see automaatselt. Visual Studio Code genereerib ka õigeaegseid aruandeid iga eduka toimimise ja vea kohta.

Sügav integratsioon

Lisaks saame oma töövoo täiustamiseks integreerida oma projekti Visual Studio Code'i. Meie ülesannete integreerimine Visual Studio koodis on lihtne ja kiire.

Käivitage käsupalett ja valige “Konfigureeri Task Runner”. Visual Studio Code annab loendi ehitustööriistast, mida ta toetab. Sel juhul me valime “Gulp”, kuna see on see, mida me kasutame oma projektis käesolevas artiklis.

Visual Studio Code peaks nüüd looma uue faili nimega tasks.json alla .vscode oma projektikataloogis. tasks.json, sellel hetkel sisaldab tühi konfiguratsioon.

Ja nagu näete allpool, ülesandeid vara on hetkel vaid tühi massiiv.

"version": "0.1.0", "käsk": "gulp", "isShellCommand": tõsi, "args": ["--no-color"], "ülesanded": []

Laiendage ülesandeid väärtust järgmiselt.

"version": "0.1.0", "käsk": "gulp", "isShellCommand": tõsi, "args": ["--no-color"], "ülesanded": ["taskName": " default "," isBuildCommand ": true,]

The taskName määrab meie nimi gulpfile.js mida me tahaksime käivitada. The isBuildCommand vara määratleb vaikimisi käsk nagu “Ehita” käsk. Nüüd, selle asemel, et minna käsupaleti ümber, võite lihtsalt vajutada klahvikombinatsiooni Shift + Cmd + B.

Teise võimalusena võite valida “Käivita ehitamise ülesanne” otsingu tulemustest käsupaletis.

Pakkimine üles

Ma arvan, et Visual Studio Code on suure tulevikuga koodiredaktor. See on kiire ja ehitatud mõningate käepäraste funktsioonidega, mis on välja arvatud, sealhulgas see, mida oleme käesolevas artiklis näidanud.

Oleme näinud, kuidas käivitada ülesanne Gulpist; saate kasutada ka Grunt'i. Oleme näinud, kuidas ülesanne integreerida Visual Studio koodiga ja käivitada klahvikombinatsiooniga, mis muudab meie töövoo sujuvamaks.

Loodetavasti leiad selle artikli kasuliku ülevaate ehitustööde käivitamiseks ja ärge unustage vaadata meie eelmisi artikleid, et saada rohkem nõuandeid Visual Studio koodi maksimaalseks kasutamiseks.

• Visual Studio kood: 5 Awesome funktsioone, mis muudavad selle esirinnaks
• Visual Studio koodi kohandamine
• 8 Võimas Visual Studio koodi laiendused esiotsa arendajatele
• Visual Studio kood: tootlikkuse suurendamine võtmega sidumise haldamise kaudu
• Microsofti kaasava kujunduse mõju Visual Studio koodile