Node Package Manager (npm) und Gulp in Visual Studio

Der Node Package Manager (npm) ist seit 2015 fester Bestandteil von Visual Studio. Npm ist ein Paketmanager für die JavaScript Laufzeitumgebung Node.js und beinhaltet viele Pakete, die auch in Visual Studio Projekten verwendet werden können. Mehr Informationen zu npm gibt es hier.

In Visual Studio können die Pakete über einen JavaScript-Task Runner ausgeführt werden. Die Besonderheit hierbei ist, dass JavaScript Code außerhalb des Browsers ausgeführt werden kann. Visual Studio beinhaltet hierfür die Task Runner Gulp sowie Grunt.

Die Task Runner Gulp und Grunt kommen häufig in der Webentwicklung zum Einsatz um Beispielsweise JavaScript bzw. CSS Dateien zu minimieren und um mehrere Dateien zu verketten. Außerdem besteht die Möglichkeit eine Quellcode-Analyse für JavaScript durchzuführen.

Einbinden von npm

Der Node Package Manager kann in Visual Studio Webprojekten mithilfe der Dateivorlage „npm Configuration File“ eingebunden werden, wodurch die Datei „package.json“ angelegt wird.

npm-configuration-file

Die verfügbaren Pakete können mithilfe der Datei „package.json“ in das Projekt hinzugefügt werden. Die passenden Pakete werden während der Eingabe über die Intellisense angezeigt. Nach der Auswahl von einem Paket kann die gewünschte Version ausgewählt werden. Hierbei kann man entweder eine beliebige Version angeben (z.B. 3.9.1) oder eine Nebenversion bzw. eine Hauptversion. Eine Nebenversion wird über das Muster „~3.9.1 “ eingegeben, hierbei wird die letzte verfügbare Nebenversion von „3.9.x“ verwendet. Eine Hauptversion wird über das Muster „^3.9.1“ festgelegt und verwendet das letzte Release aus „3.x.x“.

npm

Nach dem Speichern der Datei „package.json“ werden die angegebenen Node.js Pakete runtergeladen und in dem Ordner „node_modules“ gespeichert.

Einbinden von Gulp

Gulp kann ebenfalls mit Hilfe einer eigenen Dateivorlage in das Webprojekt eingebunden werden. Durch Verwendung der Dateivorlage „Gulp Configuration File“ wird die Datei gulpfile.js erstellt.

gulp

Die Gulp Konfigurationsdatei definiert die erforderlichen Plug-Ins welche über „require“ geladen werden. Die benötigten Plug-Ins können über npm in das Projekt hinzugefügt werden. Anschließende können die geladenen Plug-Ins in den Aufgaben verwendet werden, welche als Tasks in der Konfigurationsdatei hinzugefügt werden und über den „Task Runner Explorer“ in Visual Studio ausgeführt werden können. Der „Task Runner Explorer“ kann in Visual Studio über den Solution Explorer mit einem Rechtsklick auf die Datei „gulpfile.js“ geöffnet werden.

Die erstellten Tasks werden in dem „Task Runner Explorer“ aufgelistet und können durch einen Doppelklick ausgeführt werden. Alternativ können die Tasks bei bestimmten Aktionen (z.B. nach einem Build) ausgeführt werden.

Task Runner Explorer