Jak automatizovat úkoly v kódu Visual Studio

Použití nástroje pro sestavení jako Grunt nebo Gulp vám může ušetřit spoustu času vývojové fáze automatizace několika opakování “Úkoly”. Pokud se rozhodnete pro aplikaci Visual Studio Code jako editor kódu go-to, může být váš pracovní postup ještě efektivnější a nakonec produktivnější..

Visual Studio Code, postavený s jádrem Node.js, vám to umožňuje spouštět úlohy bez nutnosti opustit okno editoru. A my vám ukážeme, jak to udělat v tomto příspěvku.

Pojďme začít.

Předpoklady

Nejprve budete muset mít Node, NPM (Node Package Manager) a CLI (Command Line Interface) příslušného nástroje pro instalaci, který je nainstalován ve vašem systému. Pokud si nejste jisti, zda máte všechny tyto nainstalované, je ověření, že je to stejně snadné jako zadávání příkazových řádků.

Budu také předpokládat, že soubory a adresáře ve vašem projektu jsou na svém správném místě, včetně config souboru, například gulpfile.js nebo Gruntfile.js pokud místo toho použijete Grunt. A závislost na projektu registrovaná v package.json v tomto bodě.

Následují naše projektové adresáře a soubory vytvořené pro účely a demonstrace v tomto článku. Váš projekt by byl jistě hodně odlišný; můžete mít více či méně souborů.

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

Gulp využíváme jako náš stavební nástroj v našem projektu. V Úřadu máme několik Úloh gulpfile.js jak následuje:

 var gulp = vyžadují ('gulp'); var uglify = vyžadují ('gulp-uglify'); var sass = vyžadují ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('skripty', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'compress')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['skripty', 'styly']);); gulp.task ('default', ['skripty', 'styly', 'automate']); 

Konkrétně máme čtyři úkoly:

• skriptyúkol, který bude kompilovat naše JavaScript soubory a minifiy výstup přes Gulp UglifyJS plugin.
• stylyÚkol, který bude kompilovat naše SCSS soubory do CSS a komprimovat výstup.
• automatizovat: úkol, který bude automatizovat styly a skripty úkol přes vestavěný dým hodinky nástroj.
• výchozíÚkol, který bude provádět tři výše uvedené úkoly najednou.

Vzhledem k tomu, že nástroj pro sestavení v našem projektu je připraven, můžeme nyní také pokračovat v automatizaci těchto úkolů, které jsme definovali v rámci projektu gulpfile.js.

V případě, že nejste obeznámeni s některým z uvedených nástrojů, doporučuji vám, abyste se do tohoto tématu dostali ještě před tím, než budete pokračovat v dalším postupu..

• Jak používat Grunt pro automatizaci vašeho pracovního postupu
• Začínáme s Gulp.js
• Bitva o stavbu skriptů: Gulp vs Grunt

Spustit a automatizovat úkoly

Provoz a automatizace “Úkoly” v aplikaci Visual Studio Code je poměrně jednoduché. Nejdříve spusťte Paleta příkazů stisknutím kombinace kláves Shift + Cmd + P nebo pomocí panelu nabídek, Zobrazit> Paleta příkazů pokud je to pro vás výhodnější. Potom zadejte Úkoly, a vyberte “Úkoly: Spuštění úlohy” z několika málo možností uvedených ve výsledku.

Kód Visual Studio je chytrý; ví, že používáme Gulp, zvedneme gulpfile.js, a odhalit seznam Úkolů, které jsme definovali v souboru.

Zde si vybereme výchozí Úkol. Soubor SCSS stylesheets a JavaScripts bude zkompilován při výběru této úlohy a bude také spouštět automatizovat Úkol, který umožní styly a skripty Úkol běžet samostatně jednat vpřed.

Při změně souboru - šablony stylů nebo souboru JavaScript - bude automaticky zkompilován. Kód Visual Studio také generuje včasné zprávy pro každý úspěch a chyby, ke kterým dochází v operaci sestavení.

Hluboká integrace

Kromě toho můžeme integrovat náš projekt do Visual Studio Code, abychom zefektivnili náš pracovní postup. Integrace našich úkolů ve Visual Studio Code je snadná a rychlá.

Spusťte příkazovou paletu a vyberte “Konfigurace běžce úloh”. Kód Visual Studio poskytne seznam nástrojů, které podporuje. V tomto případě vybereme “Doušek”, protože to je ten, který používáme v našem projektu v tomto článku.

Kód Visual Studio by nyní měl vytvořit nový soubor s názvem tasks.json pod .vscode v adresáři projektu. tasks.json, v tomto bodě obsahuje holé nastavení.

A jak můžete vidět níže, úkolů vlastnost v současné době je pouze prázdné pole.

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

Prodloužit úkolů hodnoty.

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

taskName specifikuje název úlohy v našem gulpfile.js které bychom chtěli spustit. isBuildCommand vlastnost definuje výchozí příkaz jako “Stavět” příkaz. Nyní, místo aby jste šli kolem Command Palette, můžete jednoduše stisknout kombinaci kláves Shift + Cmd + B.

Alternativně můžete vybrat “Spustit sestavení úkolu” Výsledek hledání úkolů v příkazové paletě.

Balení

Myslím, že Visual Studio Code je editor kódu s velkou budoucností. Je to rychlé a postavené s některými praktickými funkcemi z krabice, včetně těch, které jsme ukázali v tomto článku.

Viděli jsme, jak spustit úkol z Gulp; místo toho můžete použít také Grunt. Viděli jsme, jak tento úkol integrovat do Visual Studio Code a spustit s klíčovou kombinací, díky níž je náš pracovní postup efektivnější.

Doufejme, že tento článek je užitečný jako odkaz na spouštění úloh sestavování a nezapomeňte se podívat na naše předchozí články, kde naleznete více tipů, jak co nejlépe využít kód Visual Studio.

• Kód Visual Studio: 5 Skvělé vlastnosti, které z něj činí Frontrunner
• Jak přizpůsobit kód Visual Studio
• 8 Výkonné rozšíření Visual Studio Code pro přední vývojáře
• Kód Visual Studio: Zvýšení produktivity prostřednictvím správy klíčových vazeb
• Vliv Microsoft Inclusive Design v kódu Visual Studio