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

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

• 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 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.