web-dev-qa-db-de.com

Verwenden von Grunt, Bower, Gulp und NPM mit Visual Studio 2015 für ein ASP.NET 4.5-Projekt

Visual Studio 2015 bietet integrierte Unterstützung für Tools wie Grunt, Bower, Gulp und NPM für ASP.NET 5-Projekte.

Wenn ich jedoch ein ASP.NET 4.5.2-Projekt mit Visual Studio 2015 erstelle, werden diese Tools nicht verwendet. Ich möchte Bower anstelle von Nuget verwenden, um clientseitige Pakete zu verwalten.

Ich kann Informationen zur Verwendung dieser Tools mit Visual Studio 2013 finden (siehe this question zum Beispiel). Ich denke jedoch, dass das Verfahren für Visual Studio 2015 anders ist, da es diese Tools unterstützt.

90
Robert Hegner

Obwohl Liviu Costeas Antwort richtig ist, habe ich noch einige Zeit gebraucht, um herauszufinden, wie es tatsächlich gemacht wird. Hier ist meine schrittweise Anleitung, die mit einem neuen ASP.NET 4.5.2 MVC-Projekt beginnt. Dieses Handbuch beinhaltet die clientseitige Paketverwaltung mit Bower, deckt jedoch (noch) nicht Bundling/Grunt/Gulp ab.

Schritt 1 (Projekt erstellen)

Erstellen Sie mit Visual Studio 2015 ein neues ASP.NET 4.5.2-Projekt (MVC-Vorlage).

Schritt 2 (Bündelung/Optimierung aus Projekt entfernen)

Schritt 2.1

Deinstallieren Sie die folgenden Nuget-Pakete:

  • bootstrap
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • Antlr
  • Modernizr
  • Antworten

Schritt 2.2

Entfernen Sie App_Start\BundleConfig.cs Aus dem Projekt.

Schritt 2.3

Löschen

using System.Web.Optimization;

und

BundleConfig.RegisterBundles(BundleTable.Bundles);

von Global.asax.cs

Schritt 2.4

Löschen

<add namespace="System.Web.Optimization"/>

von Views\Web.config

Schritt 2.5

Baugruppenbindungen für System.Web.Optimization Und WebGrease aus Web.config Entfernen

Schritt 3 (Laube zum Projekt hinzufügen)

Schritt 3.1

Neue package.json - Datei zum Projekt hinzufügen (NPM configuration file - Elementvorlage)

Schritt 3.2

bower zu devDependencies hinzufügen:

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "bower": "1.4.1"
  }
}

Das Laubenpaket wird automatisch installiert, wenn package.json Gespeichert wird.

Schritt 4 (Laube konfigurieren)

Schritt 4.1

Neue bower.json - Datei zum Projekt hinzufügen (Bower Configuration file - Elementvorlage)

Schritt 4.2

Fügen Sie den Abhängigkeiten bootstrap, jquery-validation-unobtrusive, modernizr und respond hinzu:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "*",
    "jquery-validation-unobtrusive": "*",
    "modernizr": "*",
    "respond": "*"
  }
}

Diese Pakete und ihre Abhängigkeiten werden automatisch installiert, wenn bower.json Gespeichert wird.

Schritt 5 (Ändern Sie Views\Shared\_Layout.cshtml)

Schritt 5.1

Ersetzen

@Styles.Render("~/Content/css")

mit

<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />

Schritt 5.2

Ersetzen

@Scripts.Render("~/bundles/modernizr")

mit

<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>

Schritt 5.3

Ersetzen

@Scripts.Render("~/bundles/jquery")

mit

<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>

Schritt 5.4

Ersetzen

@Scripts.Render("~/bundles/bootstrap")

mit

<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

Schritt 6 (Andere Quellen ändern)

In allen anderen Ansichten ersetzen

@Scripts.Render("~/bundles/jqueryval")

mit

<script src="~/wwwroot/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Nützliche Links


Bündeln und Minimieren

In den Kommentaren unten empfiehlt LavaHot die Bundler & Minifier-Erweiterung als Ersatz für den Standard-Bundler, den ich in Schritt 2 entferne. Er empfiehlt auch diesen Artikel = beim Bündeln mit Gulp.

128
Robert Hegner

Es ist eigentlich nicht zu unterschiedlich. Es ist nur so, dass all dies in Visual Studio besser unterstützt wird, wenn Sie beispielsweise neue Elemente hinzufügen, für die Sie Vorlagen für Bower- oder Npm-Konfigurationsdateien haben. Sie haben auch Vorlagen für die Konfigurationsdateien gulp oder grunt.
Das eigentliche Aufrufen von Grunt/Gulp-Tasks und das Binden von Tasks zum Erstellen von Ereignissen wird jedoch weiterhin mit Task Runner Explorer ausgeführt, genau wie in VS 2013.

4
Liviu Costea