Kaip automatizuoti užduotis „Visual Studio“ kode
Naudojant statybinį įrankį, pvz., „Grunt“ arba „Gulp“, galite sutaupyti daug laiko kūrimo etapui automatizuoti keletą pasikartojančių “Užduotys”. Jei pasirinksite „Visual Studio Code“ kaip „go-to code“ redaktorių, jūsų darbo eiga gali būti dar labiau supaprastinta ir galiausiai būtų našesnė.
„Visual Studio Code“ leidžia jums sukurti „Node.js“ pagrindinį elementą vykdykite užduotis, nepalikdami redaktoriaus lango. Ir mes parodysime, kaip tai padaryti šiame pranešime.
Pradėkime.
Būtinos sąlygos
Visų pirma, turėsite turėti Node, NPM (Node Package Manager) ir atitinkamo kūrimo įrankio, įdiegto jūsų sistemoje, CLI (Command Line Interface). Jei nesate tikri, ar turite visus šiuos įrenginius, patikrinkite, ar jie yra tokie pat paprasti, kaip ir komandų eilutės įvedimas.
Taip pat manau, kad jūsų projekto failai ir katalogai yra tinkama vieta, įskaitant konfig failą, pvz., gulpfile.js arba Gruntfile.js jei naudojate „Grunt“. Ir registruotos projekto priklausomybės package.json taip pat turėtų būti įdiegta.
Toliau pateikiami mūsų projektų katalogai ir failai, sukurti a demonstracija šiame straipsnyje. Jūsų projektas tikrai būtų daug skirtingas; gali būti daugiau ar mažiau failų.
. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json
Mes naudojame „Gulp“ kaip mūsų kūrimo įrankį mūsų projekte. Mes turime keletą užduočių, užregistruotų gulpfile.js taip:
var gulp = reikalauti („gulp“); var uglify = reikalauti („gulp-uglify“); var sass = reikalauti („gulp-sass“); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task („scenarijai“, funkcija () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stiliai', funkcija () grįžti gulp.src (sassSrc) .pipe (sass (outputStyle: 'suspaustas'))) .pipe (gulp.dest ('./css'));) ; gulp.task ('automatizuoti', funkcija () gulp.watch ([sassSrc, jsSrc], ['scenarijai', 'stiliai'));); gulp.task („numatytasis“, [„scenarijai“, „stiliai“, „automatizuoti“)); Konkrečiai nurodėme keturias užduotis:
scenarijus: užduotis, kuri sukurs mūsų „JavaScript“ rinkmenas ir sumažins išvestį „Gulp UglifyJS“ papildiniu.stilių: užduotis, kuri sukurs mūsų SCSS failus į CSS ir suglaudins išvestį.automatizuoti: užduotis, kuri automatizuosstiliųirscenarijusužduotis, nors ir įmontuota gulpžiūrėtinaudingumas.numatytas: užduotis, kuri vienu metu atliks visas tris minėtas užduotis.
Kadangi visi mūsų projekto kūrimo įrankiai yra parengti, dabar galime ir toliau automatizuoti šias užduotis, kurias mes nustatėme gulpfile.js.
Tačiau, jei nesate susipažinę su bet kuria iš minėtų įrankių, labai rekomenduojame išnagrinėti keletą ankstesnių įrašų, kad galėtumėte jus įtraukti į temą prieš tęsdami toliau.
- Kaip naudoti Grunt automatizuoti savo darbo eigą
- Darbo su „Gulp.js“ pradžia
- Sukurti scenarijų mūšis: Gulp vs Grunt
Vykdyti ir automatizuoti užduotis
Veikimas ir automatizavimas “Užduotys” Visual Studio Code yra gana paprasta. Pirma, paleiskite Komandų paletė paspaudus klavišų kombinaciją „Shift + Cmd + P“ arba per meniu juostą, Peržiūrėti> Komandų paletė jei tai jums patogiau. Tada įveskite Užduotys, ir pasirinkite “Užduotys: paleisti užduotį” iš kelių rezultatų, rodomų rezultate.
„Visual Studio Code“ yra protingas; ji žino, kad mes naudojame „Gulp“, pasiimame gulpfile.js, ir atskleisti užduočių sąrašą, kurį mes nustatėme faile.
gulpfile.jsČia pasirinkite numatytas Užduotis. SCSS stilių lentelės ir „JavaScripts“ failas bus renkami pasirinkus šią užduotį ir taip pat bus suaktyvinta automatizuoti Užduotis, kuri leis stilių ir scenarijus Užduotis veikti autonomiškai.
Pakeitus failą - stilių ar „JavaScript“ failą - jis bus automatiškai sukompiliuotas. „Visual Studio Code“ taip pat generuoja savalaikius pranešimus apie kiekvieną sėkmę ir klaidas, kurios atsiranda statant operaciją.
Gilus integravimas
Be to, mes galime integruoti savo projektą į „Visual Studio Code“, kad supaprastintume savo darbo eigą. Mūsų užduočių integravimas į „Visual Studio“ kodą yra paprastas ir greitas.
Paleiskite komandų paletę ir pasirinkite “Konfigūruokite užduočių bėgiklį”. „Visual Studio Code“ suteiks remiamo įrankio sąrašą. Šiuo atveju mes pasirenkame “Gulp”, nuo to mes naudojame šį straipsnį šiame straipsnyje.
Dabar „Visual Studio Code“ turėtų sukurti naują failą, pavadintą tasks.json pagal .vscode jūsų projekto kataloge. tasks.json, šiuo metu yra tuščios konfigūracijos.
Ir kaip matote žemiau, užduotys nuosavybė šiuo metu yra tik tuščia matrica.
"version": "0.1.0", "komanda": "gulp", "isShellCommand": tiesa, "args": ["--no-color"], "užduotys": []
Išplėsti užduotys reikšmę.
"versija": "0.1.0", "komanda": "gulp", "isShellCommand": tiesa, "args": ["--no-color"], "užduotys": ["taskName": " numatytasis "," isBuildCommand ": tiesa,]
The užduoties pavadinimas nurodo užduoties pavadinimą mūsų gulpfile.js kad mes norėtume paleisti. The isBuildCommand nuosavybė apibrėžia numatytas komandą kaip “Sukurkite” komandą. Dabar vietoj komandų paletės galite tiesiog paspausti klavišų kombinaciją „Shift“ + „Cmd + B“.
Taip pat galite pasirinkti “Vykdyti užduočių kūrimą” komandų paletės paieškos rezultatų rezultatas.
Apvyniojimas
Manau, „Visual Studio Code“ yra kodo redaktorius su puikia ateitimi. Jis yra greitas ir pastatytas su kai kuriomis patogiomis funkcijomis iš dėžutės, įskaitant vieną, kurią mes parodėme šiame straipsnyje.
Matėme, kaip paleisti užduotį iš „Gulp“; vietoj to galite naudoti „Grunt“. Matėme, kaip integruoti užduotį į „Visual Studio“ kodą ir paleisti su raktų deriniu, kuris leidžia mūsų darbo eigą supaprastinti.
Tikimės, kad šis straipsnis bus naudingas kaip nuoroda, kaip paleisti kūrimo užduotis, ir nepamirškite patikrinti ankstesnių straipsnių, kuriuose rasite daugiau patarimų, kaip išnaudoti „Visual Studio“ kodą.
- „Visual Studio“ kodas: 5 Awesome savybės, leidžiančios jį tapti „Frontrunner“
- Kaip pritaikyti „Visual Studio“ kodą
- 8 Galingi „Visual Studio“ kodo plėtiniai „Front-end Developers“
- „Visual Studio“ kodas: našumo didinimas naudojant „Key Binding Management“
- „Microsoft Inclusive Design“ įtaka „Visual Studio“ kodui
