Taken automatiseren in Visual Studio-code

Het gebruik van een bouwtool zoals Grunt of Gulp kan u een hoop tijd van de ontwikkelingsfase besparen een paar herhalingen automatiseren “taken”. Als u kiest voor Visual Studio Code als uw startcode-editor, kan uw workflow nog meer gestroomlijnd zijn en, uiteindelijk, productiever zijn.

Gebouwd met Node.js als kern, kunt u met Visual Studio Code dit doen voer de taken uit zonder het editorvenster te verlaten. En we zullen je laten zien hoe je dit doet in dit bericht.

Laten we beginnen.

Pre-requisites

Om te beginnen moet u Node, NPM (Node Package Manager) en de CLI (Command Line Interface) van de betreffende buildtool allemaal in uw systeem hebben geïnstalleerd. Als u niet zeker weet of al deze zijn geïnstalleerd, controleert u of het net zo eenvoudig is als het typen van de opdrachtregels.

Ik ga er ook vanuit dat bestanden en mappen in uw project op hun juiste plaats staan, inclusief de config bestand, zoals de gulpfile.js of Gruntfile.js als je in plaats daarvan Grunt gebruikt. En projectafhankelijkheden geregistreerd in package.json moet op dit moment ook worden geïnstalleerd.

Het volgende is onze projectdirectory's en bestanden, gemaakt met het oog op a demonstratie in dit artikel. Je project zou zeker heel anders zijn; je hebt misschien meer of minder bestanden.

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

We gebruiken Gulp als onze bouwtool in ons project. We hebben een aantal taken geregistreerd in de gulpfile.js als volgt:

 var gulp = vereisen ('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: 'gecomprimeerd')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automate']); 

Er zijn specifiek vier taken die we hebben gespecificeerd:

• scripts: de taak die onze JavaScript-bestanden compileert en de uitvoer minimaliseert via de Gulp UglifyJS-plug-in.
• stijlen: de taak die onze SCSS-bestanden in CSS compileert en de uitvoer comprimeert.
• automatiseren: de taak die het stijlen en scripts taak hoewel de slok ingebouwd kijk maar nut.
• standaard: de taak die de drie eerder genoemde taken tegelijk uitvoert.

Omdat de bouwtool in ons project volledig is voorbereid, kunnen we nu ook doorgaan met het automatiseren van deze taken die we hebben gedefinieerd binnen de gulpfile.js.

Als u echter niet vertrouwd bent met het werken met een van de genoemde hulpmiddelen, raad ik u ten zeerste aan enkele van onze eerdere berichten te bekijken om u op het onderwerp te helpen voordat u verdergaat..

• Hoe grunt te gebruiken om uw workflow te automatiseren
• Aan de slag met Gulp.js
• The Battle Of Build Scripts: Gulp vs Grunt

Voer taken uit en automatiseer ze

Hardlopen en automatiseren “taken” in Visual Studio-code is vrij eenvoudig. Start eerst de Opdrachtpalet door op de Shift + Cmd + P-toetscombinatie of via de menubalk te drukken, Beeld> Opdrachtenpalet als dat handiger is voor jou. Typ dan taken, en selecteer “Taken: taak uitvoeren” uit het paar aantal opties dat in het resultaat wordt getoond.

Visual Studio Code is slim; het weet dat we Gulp gebruiken, ophalen gulpfile.js, en onthul de lijst met taken die we hebben gedefinieerd in het bestand.

Hierin selecteren we de standaard Taak. De SCSS-stylesheets en het JavaScript-bestand zullen worden gecompileerd bij het selecteren van deze taak, en het zal ook de automatiseren Taak die de stijlen en scripts Taak om autonoom verder te gaan.

Bij het wijzigen van een bestand - een stylesheet of een JavaScript-bestand - wordt het automatisch gecompileerd. Visual Studio Code genereert ook tijdige rapporten voor elk succes en fouten die optreden tijdens de bouwbewerking.

Diepe integratie

Bovendien kunnen we ons project integreren in Visual Studio Code om onze workflow te stroomlijnen. En onze taken integreren in Visual Studio-code is gemakkelijk en snel.

Start het opdrachtpalet en selecteer “Configureer Taak Runner”. Visual Studio Code geeft een lijst met bouwtools die het ondersteunt. In dit geval selecteren we “Slok”, want dat is degene die we in dit artikel gebruiken in ons project.

Visual Studio Code zou nu een nieuw bestand moeten maken met de naam tasks.json onder .vscode in uw projectdirectory. tasks.json, op dit punt bevat de blote configuratie.

En zoals je hieronder kunt zien, is de taken property in is momenteel slechts een lege array.

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

Verleng de taken waarde als volgt.

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

De Opdrachtnaam specificeert de taaknaam in onze gulpfile.js dat we zouden willen rennen. De isBuildCommand eigenschap definieert de standaard commando als de “Bouwen” commando. In plaats van het commando-palet te doorlopen, kunt u nu eenvoudig op de toetscombinatie Shift + Cmd + B drukken.

Als alternatief kunt u de “Run Build Task” van het zoekresultaat Taken in het opdrachtpalet.

Afsluiten

Ik denk dat Visual Studio Code een code-editor is met een geweldige toekomst. Het is snel en gebouwd met een aantal handige functies uit de doos, waaronder een die we in dit artikel hebben laten zien.

We hebben gezien hoe een taak uit Gulp moet worden uitgevoerd; je kunt in plaats daarvan ook Grunt gebruiken. We hebben gezien hoe de taak in Visual Studio Code kan worden geïntegreerd en met een toetscombinatie kan worden uitgevoerd, waardoor onze workflow gestroomlijnder wordt.

Hopelijk vindt u dit artikel nuttig als een referentie voor het uitvoeren van build-taken en vergeet niet onze vorige artikelen te lezen voor meer tips om het beste uit Visual Studio Code te halen.

• Visual Studio Code: 5 geweldige functies die het tot een koploper maken
• Visual Studio Code aanpassen
• 8 Krachtige Visual Studio-codelextensies voor front-end ontwikkelaars
• Visual Studio-code: verhoging van de productiviteit via Key Binding Management
• De invloed van Microsoft Inclusive Design in Visual Studio Code