À l'aide de Grunt, Bower, Gulp, MNP avec Visual Studio 2015 pour un ASP.NET 4.5 Projet

Tout Liviu Costea réponse est correcte, il a toujours m'a fallu un certain temps pour comprendre comment il est fait. Donc voici mon étape par guide pas à pas à partir d'une nouvelle ASP.NET 4.5.2 projet MVC. Ce guide inclut côté client de gestion de paquets à l'aide de la charmille, mais n'a pas (encore) de couvrir le groupage/grunt/gulp.

L'Étape 1 (Créer Un Projet)

Créer un nouveau ASP.NET 4.5.2 Projet MVC (Modèle) avec Visual Studio 2015.

L'étape 2 (Supprimer le Groupage/Optimisation de Projet)

Étape 2.1

Désinstaller la suite de Packages Nuget:

• bootstrap
• Microsoft.jQuery.Non-intrusif.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimisation
• WebGrease
• Antlr
• Modernizr
• Répondre

L'étape 2.2

Supprimer App_Start\BundleConfig.cs de projet.

Étape 2.3

Supprimer

using System.Web.Optimization;

et

BundleConfig.RegisterBundles(BundleTable.Bundles);

de Global.asax.cs

De l'étape 2.4

Supprimer

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

de Views\Web.config

Étape 2.5

Supprimer Assemblée Liaisons pour System.Web.Optimization et WebGrease de Web.config

L'étape 3 (Ajouter de verdure à Projet)

Étape 3.1

Ajouter de nouveaux package.json fichier de projet (NPM configuration file modèle d'élément)

Étape 3.2

Ajouter bower à devDependencies:

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

La charmille paquet est automatiquement installé lors de l' package.json est enregistré.

L'étape 4 (Configurer bower)

L'étape 4.1

Ajouter de nouveaux bower.json fichier de projet (Bower Configuration file modèle d'élément)

Étape 4.2

Ajouter bootstrap, jquery-validation-unobtrusive, modernizr et respond dépendances:

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

De ces paquets et leurs dépendances sont automatiquement installé lors de l' bower.json est enregistré.

L'Étape 5 (Modifier Views\Shared\_Layout.cshtml)

Étape 5.1

Remplacer

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

avec

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

L'étape 5.2

Remplacer

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

avec

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

L'étape 5.3

Remplacer

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

avec

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

L'étape 5.4

Remplacer

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

avec

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

L'étape 6 (Modifier d'autres sources)

Dans toutes les autres Vues remplacer

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

avec

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

---

Liens Utiles

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

---

Regroupement & Minifying

Dans les commentaires ci-dessous LavaHot recommande la Bundler & Minifier extension comme un remplacement pour le défaut bundler qui je supprimer à l'étape 2. Il recommande également cet article sur le regroupement avec Gulp.