Visual Studio -koodin tehtävien automatisointi

Rakennustyökalun kuten Gruntin tai Gulpin käyttäminen voi säästää paljon aikaa kehitysvaiheesta automatisoida muutama toistuva “tehtävät”. Jos valitset Visual Studio -koodin go-to code -editoriksi, työnkulku voisi olla entistä virtaviivaisempi ja lopulta tuottavampi.

Visual Studio -koodin avulla voit rakentaa Node.js: n ytimessä suorita tehtävät ilman editori-ikkunan jättämistä. Ja me näytämme sinulle, miten tämä tapahtuu tässä viestissä.

Aloitetaanpa.

Edellytykset

Ensinnäkin sinun täytyy olla solmu, NPM (solmupakettien hallinta) ja vastaavan rakennus työkalun CLI (komentoriviliitäntä), jotka on asennettu järjestelmään. Jos et ole varma, onko sinulla kaikki nämä asennetut, varmista, että se on yhtä helppoa kuin komentorivien kirjoittaminen.

Oletan myös, että projektisi tiedostot ja hakemistot ovat niiden oikeassa paikassa, mukaan lukien config tiedosto, kuten gulpfile.js tai Gruntfile.js jos käytät Gruntia. Ja hankekohtaiset riippuvuudet on rekisteröity package.json tulisi myös asentaa tässä vaiheessa.

Seuraavassa on projektihakemistot ja tiedostot, jotka on luotu a esittely tässä artikkelissa. Projektisi olisi varmasti paljon erilainen; sinulla voi olla enemmän tai vähemmän tiedostoja.

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

Käytämme Gulpia rakennustyökaluna projektissamme. Meillä on useita tehtäviä, jotka on rekisteröity gulpfile.js seuraavasti:

 var gulp = vaadi ('gulp'); var uglify = vaadi ('gulp-uglify'); var sass = vaadi ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', toiminto () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('tyylejä', toiminto () palaa gulp.src (sassSrc) .pipe (sass (outputStyle: 'pakattu'))) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', toiminto () gulp.watch ([sassSrc, jsSrc], ['skriptit', 'tyylit']);); gulp.task ('oletus', ['skriptit', 'tyylit', 'automatisoida'));

Olemme määrittäneet erityisesti neljä tehtävää:

skriptejä: Tehtävä, joka kokoaa JavaScript-tiedostot sekä pienentää tulostusta Gulp UglifyJS -liitännällä.
tyylit: tehtävä, joka kokoaa SCSS-tiedostosi CSS: ään ja pakkaa tuotoksen.
automatisoida: tehtävä, joka automatisoi tyylit ja skriptejä tehtävä, vaikka sisäänrakennettu gulp katsella apuohjelma.
oletusarvo: tehtävä, joka suorittaa kolme edellä mainittua tehtävää yhdessä.

Koska projektimme rakennustyökalu on kaikki valmis, voimme nyt myös automatisoida nämä tehtävät, jotka olemme määrittäneet gulpfile.js.

Jos et kuitenkaan ole perehtynyt johonkin mainituista työkaluista, suosittelen sinua tarkastelemaan muutamia aiempia viestejäsi, jotta pääset aiheeseen ennen kuin jatkat.

Gruntin käyttäminen työnkulun automatisoimiseksi
Aloittaminen Gulp.js: n avulla
Rakennusskriptien taistelu: Gulp vs Grunt

Suorita ja automatisoi tehtävät

Juoksu ja automatisointi “tehtävät” Visual Studio -koodissa on melko yksinkertainen. Käynnistä ensin Komentopaletti painamalla Shift + Cmd + P -näppäinyhdistelmää tai valikkorivin kautta, Näytä> Komentopaletti jos se on sinulle helpompaa. Kirjoita sitten tehtävät, ja valitse “Tehtävät: Suorita tehtävä” muutamasta vaihtoehdosta.

Visual Studio Code on älykäs; se tietää, että käytämme Gulpia, poimia gulpfile.js, ja paljastaa luettelo tehtävistä, jotka olemme määrittäneet tiedostossa.

Luettelo tehtävistä, jotka on rekisteröity `gulpfile.js`

Tässä valitaan oletusarvo Tehtävä. SCSS-tyylitaulukot ja JavaScripts-tiedosto kootaan, kun valitset tämän tehtävän, ja se käynnistää myös automatisoida Tehtävä, joka sallii tyylit ja skriptejä Tehtävä suorittaa itsenäisesti eteenpäin.

Kun vaihdat tiedostoa - tyylitaulukkoa tai JavaScript-tiedostoa - se kootaan automaattisesti. Visual Studio Code luo myös ajankohtaisia raportteja jokaisesta onnistumisesta ja virheistä, jotka tapahtuvat rakennustoiminnossa.

Syvä integraatio

Lisäksi voimme integroida projektimme Visual Studio -koodiin virtaviivaistamaan työnkulkumme. Tehtävien integrointi Visual Studio -koodiin on helppoa ja nopeaa.

Käynnistä komentopaletti ja valitse “Määritä Task Runner”. Visual Studio Code antaa luettelon rakennetyökalusta, jota se tukee. Tässä tapauksessa valitsemme “Kulaus”, koska sitä käytetään tässä artikkelissa tässä projektissa.

Visual Studio -koodin pitäisi nyt luoda uusi tiedosto nimeltä tasks.json alla .vscode projektihakemistossa. tasks.json, tässä vaiheessa sisältää paljaat konfiguraatiot.

Ja kuten näet alla, tehtävät ominaisuus on tällä hetkellä vain tyhjä matriisi.

"version": "0.1.0", "komento": "gulp", "isShellCommand": totta, "args": ["--no-color"], "tehtävät": []

Laajenna tehtävät arvo seuraavasti.

"version": "0.1.0", "komento": "gulp", "isShellCommand": totta, "args": ["--no-color"], "tehtävät": ["taskName": " oletus "," isBuildCommand ": true,]

tehtävän nimi määrittää tehtävän nimen gulpfile.js että haluaisimme ajaa. isBuildCommand omaisuus määrittää oletusarvo komento “Rakentaa” komento. Nyt sen sijaan, että menisit komentopaletin ympärille, voit yksinkertaisesti painaa näppäinyhdistelmää Shift + Cmd + B.

Vaihtoehtoisesti voit valita “Suorita rakennustehtävä” Tehtävät-haun tuloksesta komentopaletissa.

Käärimistä

Mielestäni Visual Studio Code on koodinmuokkain, jolla on suuri tulevaisuus. Se on nopea ja rakennettu kätevillä ominaisuuksilla, mukaan lukien yksi, mitä olemme osoittaneet tässä artikkelissa.

Olemme nähneet, kuinka tehtävän suorittaminen Gulpilta; Voit myös käyttää Gruntia. Olemme nähneet, miten tehtävä voidaan integroida Visual Studio -koodiin ja käyttää yhdessä avainyhdistelmällä, joka tekee työnkulusta entistä virtaviivaisemman.

Toivottavasti löydät tämän artikkelin hyödyllisenä viittauksena rakennuskohteiden suorittamiseen, ja älä unohda tarkistaa aiempia artikkeleita, joissa on enemmän vinkkejä visuaalisen Studio-koodin hyödyntämisestä.

Visual Studio -koodi: 5 Awesome-ominaisuudet, jotka tekevät siitä eturivin
Visual Studio -koodin mukauttaminen
8 Tehokkaat Visual Studio -koodilaajennukset Front-end-kehittäjille
Visual Studio Code: Tuottavuuden lisääminen Key Binding Managementin avulla
Microsoft Inclusive Designin vaikutus Visual Studio -koodiin