Cum se automatizează sarcinile din Visual Studio Code

Folosind un instrument de construcție cum ar fi Grunt sau Gulp vă poate salva o mulțime de timp de etapa de dezvoltare de către automatizarea câtorva repetitive “Sarcini”. Dacă optați pentru codul Visual Studio ca editor de cod go-to, fluxul dvs. de lucru ar putea fi chiar mai raționalizat și, eventual, mai productiv.

Construit cu Node.js la bază, Visual Studio Code vă permite să executați sarcinile fără a părăsi fereastra editorului. Și vă vom arăta cum să faceți acest lucru în acest post.

Sa incepem.

Pre-rechizite

În primul rând, va trebui să aveți Nod, NPM (Node Package Manager) și CLI (Interface Line Command) a instrumentului de construcție respectiv instalat în sistem. Dacă nu sunteți sigur dacă ați instalat toate acestea, verificați că este la fel de ușor ca tastarea liniilor de comandă.

Voi presupune, de asemenea, că fișierele și directoarele din proiectul dvs. sunt în locul lor, inclusiv config fișier, cum ar fi gulpfile.js sau Gruntfile.js dacă folosiți Grunt în schimb. Și dependențele de proiecte înregistrate în package.json ar trebui, de asemenea, să fie instalat în acest moment.

Următoarele sunt directoarele și fișierele noastre de proiecte create pentru a demonstrație în acest articol. Proiectul dvs. ar fi cu siguranță mult diferit; este posibil să aveți mai multe sau mai puține fișiere.

. ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Noi folosim Gulp ca instrument de construcție în proiectul nostru. Avem o serie de sarcini înregistrate în gulpfile.js după cum urmează:

 var gulp = necesită ("gulp"); var uglify = necesită ("gulp-uglify"); var sass = necesită ("gulp-sass"); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', function () retur gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stiluri', functie () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'comprimat')) .pipe (gulp.dest ('./css' ; gulp.task ('automate', funcția () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ("implicit", ["scripturi", "stiluri", "automate"]);

Există în mod specific patru sarcini pe care le-am specificat:

script-uri: sarcina care va compila fișierele noastre JavaScript, precum și minifiy de ieșire prin Gulp UglifyJS plugin.
stiluri: sarcina care va compila fișierele SCSS în CSS, precum și comprimarea rezultatelor.
automatizarea: sarcina care va automatiza stiluri și script-uri sarcina prin gulp built-in ceas utilitate.
Mod implicit: sarcina care va executa toate cele trei sarcini de mai sus toate împreună odată.

Dat fiind că instrumentul de construire a proiectului nostru este pregătit, putem acum să continuăm și să automatizăm aceste sarcini pe care le-am definit în cadrul proiectului gulpfile.js.

Cu toate acestea, în cazul în care nu sunteți familiarizați cu lucrul cu oricare dintre instrumentele menționate, vă recomand să consultați câteva dintre posturile noastre anterioare pentru a vă prezenta în subiect înainte de a continua.

Cum să utilizați Grunt pentru a vă automatiza fluxul de lucru
Noțiuni de bază cu Gulp.js
Bătălia de a construi script-uri: Gulp vs Grunt

Executați și automatizați sarcinile

Rularea și automatizarea “Sarcini” în Visual Studio Code este destul de simplă. Mai întâi, lansați Comandă Paletă apăsând combinația de taste Shift + Cmd + P sau prin bara de meniu, Vizualizați> Paleta de comandă dacă este mai convenabil pentru dvs. Apoi tastați Sarcini, și selectați “Sarcini: executați sarcina” din numărul mic de opțiuni afișate în rezultat.

Codul Visual Studio este inteligent; știe că îl folosim pe Gulp, ridică-te gulpfile.js, și dezvăluie lista de sarcini pe care le-am definit în fișier.

Lista sarcinilor înregistrate în `gulpfile.js`

Aici, să selectăm Mod implicit Sarcină. Fișierele de stiluri SCSS și fișierele JavaScript vor fi compilate la selectarea acestei activități și va declanșa și automatizarea Sarcină care va permite stiluri și script-uri Sarcina de a funcționa în mod autonom înainte.

Când schimbați un fișier - o foaie de stil sau un fișier JavaScript - acesta va fi compilat automat. Codul Visual Studio generează, de asemenea, rapoarte în timp util pentru fiecare succes și erori care apar în operația de construire.

Deep Intergration

În plus, putem integra proiectul nostru în Visual Studio Code pentru a ne raționaliza fluxul de lucru. Și integrarea sarcinilor noastre în Visual Studio Code este ușor și rapid.

Lansați paleta de comandă și selectați “Configurați Runner de activități”. Codul Visual Studio va oferi o listă a instrumentului de construcție pe care îl suportă. În acest caz, selectăm “Înghiţitură”, deoarece acesta este cel pe care îl folosim în proiectul nostru în acest articol.

Codul Visual Studio ar trebui să creeze acum un nou fișier numit tasks.json sub .vscode în directorul de proiect. tasks.json, în acest moment, conține configurație goală.

Și după cum puteți vedea mai jos, sarcini proprietatea este în prezent doar o matrice goală.

"versiunea": "0.1.0", "comanda": "gulp", "isShellCommand": true, "args": [

Extindeți sarcini valoare după cum urmează.

"taskName": "" taskname ":" "" " implicit "," isBuildCommand ": true,]

taskName specifică numele sarcinii din gulpfile.js pe care ne-ar plăcea să o luăm. isBuildCommand proprietatea definește Mod implicit comanda ca “Construi” comanda. Acum, mai degrabă decât să mergeți în jurul paletei de comandă, puteți apăsa pur și simplu combinația de taste Shift + Cmd + B.

Alternativ, puteți selecta “Executați sarcina de creare” din rezultatul căutării Sarcini din Paleta de comandă.

Înfășurarea în sus

Cred că Visual Studio Code este un editor de cod cu un viitor minunat. Este rapid și construit cu câteva caracteristici utile din cutie, inclusiv una pe care le-am arătat în acest articol.

Am văzut cum să executați o sarcină de la Gulp; de asemenea, puteți folosi Grunt. Am văzut cum să integrăm sarcina în Visual Studio Code și să rulez cu o combinație de taste, ceea ce face fluxul nostru de lucru mai raționalizat.

Sperăm că veți găsi acest articol util ca referință pentru executarea sarcinilor de construire și nu uitați să verificați articolele noastre anterioare pentru mai multe sfaturi pentru a profita la maximum de codul Visual Studio.

Codul Visual Studio: 5 caracteristici minunate care îl fac un Frontrunner
Cum de a personaliza Visual Studio Code
8 Extensii puternice pentru codul Visual Studio pentru dezvoltatorii din Front-end
Codul Visual Studio: Creșterea productivității prin intermediul gestionării legăturilor cheie
Influența designului Microsoft Inclusive în Visual Studio Code