Ako automatizovať úlohy v programe Visual Studio Code
Použitie nástroja ako Grunt alebo Gulp vám môže ušetriť veľa času vývojovej fázy automatizácia niekoľkých opakovaných “úlohy”. Ak sa rozhodnete pre kód Visual Studio ako svoj editor kódov, váš pracovný postup by mohol byť ešte efektívnejší a nakoniec bude produktívnejší.
Postavený s Node.js v jeho jadre, Visual Studio kód umožňuje spustite úlohy bez nutnosti opustiť okno editora. A ukážeme vám, ako to urobiť v tomto príspevku.
Poďme začať.
predpoklady
Najprv budete musieť mať nainštalovaný v systéme uzol, NPM (Node Package Manager) a CLI (Command Line Interface) príslušného nástroja na zostavenie. Ak si nie ste istí, či máte všetko nainštalované, overte, či je to tak jednoduché ako zadávanie príkazových riadkov.
Budem tiež predpokladať, že súbory a adresáre vo vašom projekte sú na ich správnom mieste, vrátane config súbor, napríklad gulpfile.js alebo Gruntfile.js ak použijete Grunt. Závislosti projektov registrované v roku 2006 package.json by mali byť nainštalované aj v tomto bode.
Nasledujú naše adresáre a súbory projektov vytvorené na účely a demonštrácie v tomto článku. Váš projekt by určite bol úplne iný; môžete mať viac alebo menej súborov.
. ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
V našom projekte používame Gulp ako náš nástroj na vytváranie. Máme niekoľko úloh zapísaných v programe gulpfile.js nasledovne:
var gulp = vyžadujú ("gulp"); var uglify = vyžadujú ("gulp-uglify"); var sass = vyžadovať ("gulp-sass"); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('skripty', funkcia () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ("štýly", funkcia () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'komprimované')) .pipe (gulp.dest ('./css' ; gulp.task ('automate', funkcia () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ("predvolené", ["skripty", "štýly", "automatizovať"]); Existujú špeciálne štyri úlohy, ktoré sme špecifikovali:
skripty: úloha, ktorá bude kompilovať naše súbory JavaScriptu, rovnako ako minifiy výstup cez plugin Gulp UglifyJS.štýly: úloha, ktorá bude kompilovať naše SCSS súbory do CSS a komprimovať výstup.automatizovať: úloha, ktorá bude automatizovaťštýlyaskriptyúloha, ale vstavaný gulphodinkyužitočnosť.štandardné: Úloha, ktorá spustí všetky tri uvedené úlohy naraz.
Keďže nástroj na vytváranie v našom projekte je všetko pripravený, teraz môžeme pokračovať v automatizácii týchto úloh, ktoré sme definovali v rámci programu gulpfile.js.
Ak však nie ste oboznámení s prácou s niektorým z uvedených nástrojov, odporúčam vám, aby ste sa pozreli na niekoľko našich predchádzajúcich príspevkov, aby ste sa dostali do predmetu predtým, ako budete pokračovať ďalej.
- Ako používať Grunt na automatizáciu vášho pracovného postupu
- Začíname so službou Gulp.js
- Bitka o vytváranie skriptov: Gulp vs Grunt
Spustiť a automatizovať úlohy
Beh a automatizácia “úlohy” v kóde Visual Studio je úplne jednoduché. Najskôr spustite aplikáciu Príkazová paleta stlačením kombinácie klávesov Shift + Cmd + P alebo pomocou panela s ponukami, Zobraziť> Paleta príkazov ak je to pre vás výhodnejšie. Potom zadajte úlohy, a vyberte položku “Úlohy: Spustite úlohu” z malého počtu možností zobrazených vo výsledku.
Kód Visual Studio je šikovný; vie, že používame Gulp, vyzdvihnúť gulpfile.js, a odhaliť zoznam úloh, ktoré sme definovali v súbore.
gulpfile.jsTu si vyberieme štandardné Úloha. Šablóny štatistík SCSS a súborov JavaScript sa zostavia po výbere tejto úlohy a spustí sa tiež automatizovať Úloha, ktorá umožní štýly a skripty Úloha prebiehať samostatne vpred.
Pri zmene súboru - šablón so štýlmi alebo súboru JavaScript - bude automaticky zostavený. Kód Visual Studio tiež generuje včasné hlásenia o všetkých úspechoch a chybách, ktoré sa vyskytnú pri zostavovaní.
Hlboká integrácia
Okrem toho môžeme integrovať náš projekt do kódu Visual Studio, aby sme zjednodušili náš pracovný postup. A integrácia našich úloh do kódu Visual Studio je jednoduché a rýchle.
Spustite príkazovú paletu a vyberte ju “Konfigurácia úloh”. Kód Visual Studio poskytne zoznam nástrojov, ktoré podporuje. V tomto prípade vyberieme “dúšok”, pretože to je ten, ktorý používame v našom projekte v tomto článku.
Kód Visual Studio by teraz mal vytvoriť nový názov súboru tasks.json pod .vscode v adresári projektu. tasks.json, v tomto bode obsahuje holú konfiguráciu.
A ako vidíte nižšie, úlohy vlastnosť v je v súčasnosti len prázdne pole.
"verzia": "0.1.0", "príkaz": "gulp", "isShellCommand": true, "args": [
Rozšírte úlohy nasledujúcu hodnotu.
"version": "0.1.0", "príkaz": "gulp", "isShellCommand": true, "args" default "," isBuildCommand ": true,]
TaskName špecifikuje názov úlohy v našom gulpfile.js že by sme chceli bežať. isBuildCommand Vlastnosť definuje štandardné príkaz ako “vybudovať” Príkaz. Namiesto toho, aby ste prechádzali okolo príkazovej palety, môžete jednoducho stlačiť kombináciu klávesov Shift + Cmd + B.
Alternatívne môžete vybrať “Spustiť úlohu zostavenia” výsledku vyhľadávania úloh v palete príkazov.
Zbaliť
Myslím, že Visual Studio Code je editor kódu s veľkou budúcnosťou. Je to rýchle a postavené s niektorými praktickými funkciami z krabice, vrátane toho, ktorý sme ukázali v tomto článku.
Videli sme, ako spustiť úlohu z Gulp; môžete použiť aj Grunt. Videli sme, ako integrovať úlohu do kódu Visual Studio a spustiť pomocou kombinácie kľúčov, ktoré zjednodušujú náš pracovný postup.
Dúfajme, že tento článok je užitočný ako odkaz na spustenie úloh pri zostavovaní a nezabudnite si pozrieť naše predchádzajúce články o viac tipov, aby ste čo najviac využili kód Visual Studio.
- Kód Visual Studio: 5 skvelých funkcií, ktoré ho robia ako predchodcu
- Ako prispôsobiť kód Visual Studio
- 8 Výkonné rozšírenia kódov Visual Studio pre vývojárov Front-end
- Kód Visual Studio: zvyšovanie produktivity prostredníctvom správy väzieb kľúčov
- Vplyv dizajnu Microsoft Inclusive v kóde Visual Studio
