Visual Studio Code Grundkurs

Task Runner Gulp einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier verfolgen Sie, wie Sie den eingebauten bzw. mitgelieferten Task Runner von Visual Studio Code durch die leistungsfähige Variante eines Drittanbieters austauschen.

Transkript

"Visual Studio Code" hat einen integrierten Task Runner, allerdings gibt es dafür nicht irgendwelche Erweiterungen. Es kann auch immer nur eine Aufgabe ausgeführt werden und allerdings arbeitet dieser Task Runner ideal mit bewerten Task Runnern aus der JavaScript-Welt. Da gibt es zum Beispiel "Crant" oder "Gulp". Wir schauen uns mal ganz kurz Gulp an. Und "gulp" ist halt von der Performance sehr interesannt und wir schauen uns an, wir wir das eben hier integrieren können. Das Erste, was wir natürlich installieren müssen ist, dass man unter "Nodejs.org" "Node.js" installieren, dass wir den, einen Paket-Manager mitbekommen. Dann machen wir hier einen Rechtsklick und sagen "Open in Command Prompt". Und dann können wir erst mal Gulp installieren und zwar mit dem Consolenbefehl "npm install gulp-global". Das heißt, egal welches Projekt wir dann später nutzen, Gulp ist dann auf dem System installiert. Das ist also eine Bedingung, dass was man braucht. Das ist also für die Entwicklungszeit sehr relevant. Dann benötigen wir auch eine Package.json innerhalb von unserem "NodeHelloWorld". Das heißt, wir rufen innerhalb von unserem Verzeichnis "npm init" auf. Dann wird hier erst mal nach einem Namen gefragt. Nennen wir das einfach mal nur "helloworld". Ich bestätige alles einfach nur mit "Enter", yes!. Dann haben wir jetzt eine "tsconfig", eine Packag.json-Datei. Das ist die Konfigurationsdatei für den npm-Paket-Manager. Das heißt, hier können wir JavaScript-Libaries miteinbinden, die dann unser Code hier erweitert. Und ich lege hier einfach mal ein leeres "devDependencies" an. Das heißt, wir brauchen nur zur Entwicklungszeit eine Erweiterung. Ich speichere die Datei und starte "Visual Studio Code" einmal neu, weil ich habe nämlich den "Package-Watcher" aktiv und der guckt natürlch nur nach, was alles bereits existiert. Also von "Dependencies" oder "devDependencies". Und das ist eine Erweiterung, die habe ich entwickelt für "Visual Studio Code". Die kann man ganz einfach hier in der Commandline unter "install extention package watcher" installieren. Das ist hier die an zweiter Stelle. Einfach auf "Install" klicken. Und was wir jetzt brauchen ist eine Erweiterung von Gulp. Und die heißt "Gulp-uglify". Das heißt, wir wollen einfach mal, dass Ale JavaScript-Dateien im Projekt minifiziert werden und dazu gibt es eben hier die schöne Gulp-Erweiterung "gulp-", und hier kann ich wieder mit "Steuerung Leer" wunderbar mir von "Visual Studio Code" "IntelliSense" anbieten lassen und zwar auch hier. Welche Version? Ich nehme die Aktuelle. Wenn ich jetzt hier "Steuerung S", das ganze Projekt speichere, dann sollte er es auch installieren. Genau, Sie sehen auch hier ist zuweil jetzt der Package-Watcher aktiv. Es wurde automatisch alles installiert. Gulp gibt man hier auch mit ein, dass wenn jemand anderes dann das Projekt bekommt, dass da auch alles dabei ist, obwohl wir es bereits ja global installiert hatte. Okay, das schadet nicht. Ich habe einfach jetzt das Ganze gespeichert, jetzt wird das Ganze im Hintergrund installiert und nun können wir unseren Task Runner programmieren. Ganz genau, das heißt, Gulp ist nichts anderes, wie eben ein Framework für den Task Runner. Das heißt, ich lege mir hier eine neue Datei an. Das ist dann unser "gulpfile.ts". Ich möchte das Ganze mit TypeScript machen und da ich hier mit Typescript arbeite, nutze ich jetzt einfach "import gulp = require ("gulp") und "Visual Studio Code" unterringelt natürlich das Ganze jetzt hier rot, weil er überhaupt nicht weiß, was Gulp ist. Der kennt das nicht und deswegen muss man hier sogenannte "Type Definition Files" installieren. Und dazu gibt es auch einen Paket-Manager für TypeScript. Den installiert man unter "npm install tsd", auch wieder "global". Ist dieser installiert worden, ich habe ihn bei mir schon installiert, dann kann man ihn, wie bei "npm", also dem "Node Package Manager" hier aufrufen mittels "tsd init". Das müssen wir einmalig machen, dann bekommen wir nämlich eine "tsd.json"-Datei und ein neues Verzeichnis. Und dann kann man hier sehr schön mit "tsd install gulp - -save" sich die Beschreibung für Gulp herunterladen. Das ist eigentlich nichts anderes, wie eine TypeScript-Datei mit sämtlichen Interfaces und dann noch die die "Uglify"-Version. Und schon müsste "Visual Studio" uns perfekt "IntelliSense" eben für beide Frameworks geben und das Ganze unterstützen. Es kann jetzt etwas dauern, bis er das mitbekommen hat. Super, klappt wunderbar. Den Rest vom Code habe ich einfach schon mal vorbereitet: "Steuerung C", "Steuerung V". Und zwar greife ich jetzt auf meine Gulp-Instanz zu und sage, ich lege einen neuen Task zu. Diesen nenne ich "compress" und wir geben dann einen Stream von Gulp wieder zurück. Genau, das ist nämlich der Unterschied zwischen "Crant" und "Gulp". Gulp ist hier Stream-basiert. Das bedeutet, hier sage ich, gib mir mal alle JavaScript-Dateien, die er jetzt hier im "Root" findet, gebe diese Dateien, direkt in die nächste Pipe weiter. Das ist so eine richtig schöne Pipeline. Und da wird dann unsere Uglify-Funktion aufgerufen, die den Stream packt, den Code hässlich macht und wieder weiterreicht. Und beim nächsten Weiterreichen schreiben wir das Ganze in ein Verzeichnis von "Destination" wieder raus. Also das ist so die Aufgabe, was dieser eine Task hier übernimmt und das ist halt das Besondere an so einem Task Runner, weil wir hier eben extrem viele Erweiterungen herunterladen können, die hier dazwischenklinken können zwischen diese Pipes. Das beginnt von, dass wir jetzt noch TypeScript reinmachen können, bis hin zum Deployment von Code. Man kann hier also extrem viel miteinbauen und das kann halt der integrierte einfache Task Runner von "Visual Studio Code" nicht. Was man mit "Visual Studio Code" allerdings jetzt machen könnte wäre, erst mal muss jetzt unsere TypeScript-Datei zu einer JavaScript-Datei, "SteuerungShiftB". Ja, TypeScript läuft. In der "tasks.json"-Datei ist ja jetzt eben der Typescript-Compiler aktiv. Das sehen wir jetzt allerdings unten. Der ist jetzt schön aktiv geworden. Wenn ich jetzt etwas runterscrolle, bekommen wir auch die Hilfe, wie wir jetzt zum Beispiel Gulp integrieren könnten. Das heißt, hier "gulp", dann habe ich hier Taskname "compress". Also das habe ich vorher schon mal ergänzt. Das steht schon mal da und ich müsste hier eigentlich dann wieder TypeScript-Compiler auskommentieren. Und ich müsste dann innerhalb von "gulp", dann auch nochmal TypeScript ansteuern. Das wäre jetzt etwas zu umfangreich, deswegen lasse ich den Part erstmal aus.

Visual Studio Code Grundkurs

Lernen Sie alles Wichtige kennen, um mit dem kostenlosen Quelltexteditor von Microsoft in die Entwicklung von Webprojekten einsteigen zu können

2 Std. 21 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!