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 diese Frage zum Beispiel). Ich denke jedoch, dass das Verfahren für Visual Studio 2015 anders ist, da es die Unterstützung für diese Tools integriert hat.

Obwohl Liviu Costeas Antwort richtig ist, habe ich noch einige Zeit gebraucht, um herauszufinden, wie es tatsächlich gemacht wird. Hier ist meine Schritt-für-Schritt-Anleitung ab einem neuen ASP.NET 4.5.2 MVC-Projekt. Dieses Handbuch enthält die clientseitige Paketverwaltung mit Bower, behandelt jedoch (noch) nicht das Bündeln / Grunzen / Schlucken.

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 dem 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
• Reagieren

Schritt 2.2

App_Start\BundleConfig.csAus dem Projekt entfernen .

Schritt 2.3

Entfernen

using System.Web.Optimization;

und

BundleConfig.RegisterBundles(BundleTable.Bundles);

von Global.asax.cs

Schritt 2.4

Entfernen

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

von Views\Web.config

Schritt 2.5

Entfernen Sie die Baugruppenbindungen für System.Web.Optimizationund WebGreasevonWeb.config

Schritt 3 (Laube zum Projekt hinzufügen)

Schritt 3.1

Neue package.jsonDatei zum Projekt NPM configuration filehinzufügen ( Elementvorlage)

Schritt 3.2

Hinzufügen bowerzu devDependencies:

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

Das Laubenpaket wird beim Speichern automatisch installiert package.json.

Schritt 4 (Laube konfigurieren)

Schritt 4.1

Neue bower.jsonDatei zum Projekt Bower Configuration filehinzufügen ( Elementvorlage)

Schritt 4.2

Fügen Sie bootstrap, jquery-validation-unobtrusive, modernizrund respondzu Abhängigkeiten:

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

Diese Pakete und ihre Abhängigkeiten werden beim bower.jsonSpeichern automatisch installiert .

Schritt 5 (Ändern 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

• http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
• http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
• http://devkimchi.com/1511/integrating-grunt-and-bower-with-visual-studio-2013/
• http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
• http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
• http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/

Bündeln & 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 zum Bündeln mit Gulp.

Es ist eigentlich nicht zu unterschiedlich. Es ist nur so, dass all diese Funktionen in Visual Studio besser unterstützt werden. Wenn Sie beispielsweise neue Elemente hinzufügen, verfügen Sie über Vorlagen für Bower- oder Npm-Konfigurationsdateien. Sie haben auch Vorlagen für Gulp- oder Grunt-Konfigurationsdateien.
Das eigentliche Aufrufen von Grunz- / Schluck-Aufgaben und das Binden an Aufgaben zum Erstellen von Ereignissen erfolgt jedoch weiterhin mit dem Task Runner Explorer, genau wie in VS 2013.