Automatisieren von Aufgaben in Visual Studio-Code

Mit einem Build-Tool wie Grunt oder Gulp können Sie viel Zeit in der Entwicklungsphase sparen einige repetitive automatisieren “Aufgaben”. Wenn Sie sich für Visual Studio-Code als Go-to-Code-Editor entscheiden, könnte Ihr Workflow noch schlanker und letztendlich produktiver sein.

Visual Studio Code wurde im Kern aus Node.js erstellt Führen Sie die Aufgaben aus, ohne das Editorfenster verlassen zu müssen. In diesem Beitrag zeigen wir Ihnen, wie das geht.

Lass uns anfangen.

Voraussetzungen

Zunächst müssen Sie Node, NPM (Node Package Manager) und die CLI (Command Line Interface) des jeweiligen Build-Tools in Ihrem System installiert haben. Wenn Sie nicht sicher sind, ob Sie alle installiert haben, können Sie dies einfach durch Eingabe der Befehlszeilen überprüfen.

Ich gehe außerdem davon aus, dass sich Dateien und Verzeichnisse in Ihrem Projekt an der richtigen Stelle befinden, einschließlich der Konfig Datei, wie die gulpfile.js oder Gruntfile.js wenn Sie stattdessen Grunt verwenden. Und Projektabhängigkeiten in registriert package.json sollte auch an dieser Stelle installiert werden.

Nachfolgend finden Sie unsere Projektverzeichnisse und -dateien, die zum Zweck eines erstellt wurden Demonstration In diesem Artikel. Ihr Projekt wäre sicherlich ganz anders. Möglicherweise haben Sie mehr oder weniger Dateien.

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

Wir verwenden Gulp als Konstruktionswerkzeug in unserem Projekt. Wir haben eine Reihe von Aufgaben im registriert gulpfile.js wie folgt:

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

Es gibt vier spezifische Aufgaben, die wir angegeben haben:

• Skripte: Die Aufgabe, die unsere JavaScript-Dateien kompiliert und die Ausgabe über das Gulp UglifyJS-Plugin auf ein Minimum reduziert.
• Stile: Die Aufgabe, die unsere SCSS-Dateien in CSS kompiliert und die Ausgabe komprimiert.
• automatisieren: die Aufgabe, die das automatisiert Stile und Skripte Aufgabe obwohl der Schluck eingebaut ist sehen Nützlichkeit.
• Standard: Die Aufgabe, mit der die drei zuvor genannten Aufgaben gleichzeitig ausgeführt werden.

Da das Build-Tool in unserem Projekt vollständig vorbereitet ist, können wir jetzt auch die von uns definierten Aufgaben automatisieren gulpfile.js.

Falls Sie jedoch nicht mit den genannten Tools vertraut sind, empfehle ich Ihnen dringend, einige unserer vorherigen Beiträge zu lesen, um Sie mit dem Thema vertraut zu machen, bevor Sie fortfahren.

• So verwenden Sie Grunt zur Automatisierung Ihres Workflows
• Erste Schritte mit Gulp.js
• Die Schlacht um Build-Skripte: Gulp vs Grunt

Aufgaben ausführen und automatisieren

Laufen und automatisieren “Aufgaben” In Visual Studio ist der Code recht einfach. Starten Sie zuerst die Befehlsleiste durch Drücken der Tastenkombination Umschalt + Befehlstaste + P oder durch die Menüleiste, Ansicht> Befehlspalette wenn das für Sie bequemer ist. Dann tippen Sie Aufgaben, und wählen Sie “Aufgaben: Aufgabe ausführen” von den wenigen im Ergebnis angezeigten Optionen.

Visual Studio Code ist intelligent. es weiß, dass wir Gulp benutzen, abholen gulpfile.js, und zeigen Sie die Liste der Aufgaben an, die wir in der Datei definiert haben.

Hier wählen wir das aus Standard Aufgabe. Die SCSS-Stylesheets und die JavaScripts-Datei werden bei Auswahl dieser Task kompiliert und lösen auch die aus automatisieren Aufgabe, die das erlaubt Stile und Skripte Aufgabe, autonom nach vorne zu laufen.

Beim Ändern einer Datei - eines Stylesheets oder einer JavaScript-Datei - wird diese automatisch kompiliert. Visual Studio Code generiert außerdem zeitnahe Berichte für jeden Erfolg und Fehler, die beim Buildvorgang auftreten.

Tiefe Integration

Darüber hinaus können wir unser Projekt in Visual Studio Code integrieren, um unseren Workflow zu optimieren. Die Integration unserer Aufgaben in Visual Studio Code ist einfach und schnell.

Starten Sie die Befehlspalette und wählen Sie “Task Runner konfigurieren”. Visual Studio Code enthält eine Liste der unterstützten Build-Tools. In diesem Fall wählen wir aus “Schluck”, denn das ist das, was wir in diesem Artikel in unserem Projekt verwenden.

Visual Studio Code sollte jetzt eine neue Datei mit dem Namen erstellt haben Aufgaben.json unter .vscode in Ihrem Projektverzeichnis. Aufgaben.json, An dieser Stelle enthält die nackte Konfiguration.

Und wie Sie unten sehen können, die Aufgaben property in ist derzeit nur ein leeres Array.

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

Erweitere Aufgaben Wert wie folgt.

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

Das Aufgabennname gibt den Aufgabennamen in unserem an gulpfile.js dass wir gerne rennen würden. Das isBuildCommand Eigenschaft definiert die Standard Befehl als “Bauen” Befehl. Anstatt die Befehlspalette zu durchlaufen, können Sie einfach die Tastenkombination Umschalt + Befehlstaste + B drücken.

Alternativ können Sie auch auswählen “Build-Task ausführen” des Ergebnisses der Aufgaben in der Befehlspalette.

Einpacken

Ich denke, Visual Studio Code ist ein Code-Editor mit einer großen Zukunft. Es ist schnell und mit einigen praktischen Funktionen ausgestattet, einschließlich derjenigen, die wir in diesem Artikel gezeigt haben.

Wir haben gesehen, wie man eine Aufgabe von Gulp aus ausführt. Sie können stattdessen auch Grunt verwenden. Wir haben gesehen, wie Sie die Aufgabe in Visual Studio Code integrieren und mit einer Tastenkombination ausführen können, die unseren Workflow rationalisiert.

Hoffentlich finden Sie diesen Artikel als Referenz zum Ausführen von Build-Tasks hilfreich. Vergessen Sie nicht, unsere vorherigen Artikel zu weiteren Tipps zu lesen, um mehr über Visual Studio-Code zu erfahren.

• Visual Studio Code: 5 fantastische Funktionen, die es zu einem Spitzenreiter machen
• Anpassen von Visual Studio-Code
• 8 Leistungsfähige Visual Studio-Code-Erweiterungen für Front-End-Entwickler
• Code für Visual Studio: Steigerung der Produktivität durch Key Binding Management
• Der Einfluss von Microsoft Inclusive Design in Visual Studio-Code