Kako automatizirati zadatke u Visual Studio Code

Koristeći alat za izgradnju kao što je Grunt ili Gulp, možete uštedjeti mnogo vremena u fazi razvoja automatizirati nekoliko ponavljajućih “zadaci”. Ako se odlučite za Visual Studio kod kao uređivač koda za prijelaz, vaš tijek rada mogao bi biti još jednostavniji i, na kraju, produktivniji.

Izrađen s Node.js u svojoj srži, Visual Studio Code vam omogućuje pokrenite zadatke bez napuštanja prozora za uređivanje. I mi ćemo vam pokazati kako to učiniti u ovom postu.

Započnimo.

Preduvjeti

Za početak, morate imati Node, NPM (Upravitelj paketa čvorova) i CLI (Sučelje naredbenog retka) odgovarajućeg alata za izgradnju koji je instaliran na vašem sustavu. Ako niste sigurni imate li sve ove instalirane, provjera je jednostavna kao upisivanje naredbenih redaka.

Također ću pretpostaviti da su datoteke i direktorije u vašem projektu na svom mjestu, uključujući i konfig datoteku, kao što je gulpfile.js ili Gruntfile.js ako umjesto toga koristite Grunt. I ovisnosti projekta registrirane u package.json u ovom trenutku također treba instalirati.

Slijedi naš direktorij projekata i datoteka, stvoren u svrhu a demonstracija u ovom članku. Vaš bi projekt sigurno bio mnogo drugačiji; možda imate više ili manje datoteka.

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

Gulp koristimo kao alat za izgradnju u našem projektu. Imamo nekoliko zadataka registriranih u gulpfile.js kako slijedi:

 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']); 

Postoje četiri specifična zadatka koje smo naveli:

• skripta: zadatak koji će kompajlirati naše JavaScript datoteke kao i minifiy izlaz kroz Gulp UglifyJS dodatak.
• stilovi: zadatak koji će sastaviti naše SCSS datoteke u CSS, kao i komprimirati izlaz.
• automatizirati: zadatak koji će automatizirati stilovi i skripta zadatak iako je ugrađen ugriz Gledati korisnost.
• zadano: zadatak koji će sve tri zadane zadatke izvoditi sve zajedno.

Budući da je alat za izgradnju u našem projektu spreman, sada možemo i dalje automatizirati te zadatke koje smo definirali u okviru projekta gulpfile.js.

Međutim, u slučaju da niste upoznati s nekim od spomenutih alata, preporučujem vam da pogledate nekoliko naših prethodnih postova kako biste ušli u tu temu prije nego nastavite dalje.

• Kako koristiti Grunt automatizirati vaš tijek rada
• Početak rada s Gulp.js
• Bitka za gradnju Skripte: Gulp vs Grunt

Pokreni i automatiziraj zadatke

Trčanje i automatizacija “zadaci” u Visual Studio Code je prilično jednostavan. Prvo pokrenite Paleta naredbi pritiskom kombinacije tipki Shift + Cmd + P ili putem trake izbornika, Prikaz> Paleta naredbi ako vam je to prikladnije. Zatim upišite zadaci, i odaberite “Zadaci: Pokreni zadatak” od nekoliko opcija prikazanih u rezultatu.

Visual Studio Code je pametan; zna da koristimo Gulpa, pokupimo gulpfile.js, i otkrijte popis zadataka koje smo definirali u datoteci.

Ovdje ćemo odabrati zadano Zadatak. SCSS stylesheets i JavaScripts datoteka bit će sastavljeni nakon odabira ovog zadatka, a također će pokrenuti i automatizirati Zadatak koji će omogućiti stilovi i skripta Zadatak je da se pokrene samostalno.

Kada mijenjate datoteku - stilsku ili JavaScript datoteku - ona će se automatski kompilirati. Visual Studio Code također generira pravovremena izvješća za svaki uspjeh i pogreške koje se pojavljuju u operaciji izgradnje.

Duboka integracija

Nadalje, možemo integrirati naš projekt u Visual Studio Code kako bismo pojednostavili naš tijek rada. Integracija zadataka u Visual Studio Code je jednostavna i brza.

Pokrenite paletu naredbi i odaberite “Konfigurirajte trkač zadataka”. Visual Studio Code će dati popis alata za izgradnju koji podržava. U ovom slučaju odabiremo “Gutljaj”, jer to je onaj koji koristimo u našem projektu u ovom članku.

Visual Studio Code trebao je stvoriti novu datoteku pod nazivom tasks.json pod, ispod .vscode u imeniku projekta. tasks.json, u ovom trenutku, sadrži golu konfiguraciju.

Kao što možete vidjeti u nastavku zadaci svojstvo u trenutno je samo prazan niz.

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

Proširite zadaci vrijednost kako slijedi.

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

taskName određuje naziv zadatka u našem gulpfile.js koje bismo željeli pokrenuti. isBuildCommand svojstvo definira zadano naredbu kao “Izgraditi” naredba. Sada, umjesto da obilazite paletu naredbi, možete jednostavno pritisnuti kombinaciju tipki Shift + Cmd + B.

Alternativno možete odabrati “Pokreni zadatak izgradnje” rezultata pretraživanja zadataka u paleti naredbi.

Završavati

Mislim da je Visual Studio Code urednik koda s velikom budućnošću. To je brzo i izgrađen s nekim praktičnim značajkama iz kutije, uključujući i jedan koji smo pokazali u ovom članku.

Vidjeli smo kako pokrenuti Task iz Gulpa; umjesto toga možete koristiti Grunt. Vidjeli smo kako integrirati zadatak u Visual Studio Code i pokrenuti s kombinacijom tipki, što čini naš tijek rada još jednostavnijim.

Nadajmo se da će vam ovaj članak biti koristan kao referenca za izvođenje zadataka izrade, a ne zaboravite provjeriti naše prethodne članke o još savjeta kako biste najbolje iskoristili kod Visual Studio.

• Visual Studio Kod: 5 Strašan značajke koje ga čine Frontrunner
• Kako prilagoditi Visual Studio Code
• 8 Snažna proširenja Visual Studio koda za razvojne inženjere s prednje strane
• Visual Studio Code: Povećanje produktivnosti putem upravljanja vezanjem ključa
• Utjecaj Microsoftovog inkluzivnog dizajna u Visual Studio Code