Visual Studio 2015 est livré avec une prise en charge intégrée d'outils tels que Grunt, Bower, Gulp et NPM pour les projets ASP.NET 5.

Cependant, lorsque je crée un projet ASP.NET 4.5.2 à l'aide de Visual Studio 2015, il n'utilise pas ces outils. Je voudrais utiliser bower au lieu de nuget pour gérer les packages côté client.

Je peux trouver des informations sur l'utilisation de ces outils avec Visual Studio 2013 (voir cette question par exemple). Mais je suppose que la procédure est différente pour Visual Studio 2015 car il a intégré la prise en charge de ces outils.

Bien que la réponse de Liviu Costea soit correcte, il m'a encore fallu un certain temps pour comprendre comment cela se faisait. Voici donc mon guide étape par étape à partir d'un nouveau projet ASP.NET 4.5.2 MVC. Ce guide inclut la gestion des paquets côté client à l'aide de bower mais ne couvre pas (encore) le regroupement / grunt / gulp.

Étape 1 (Créer un projet)

Créez un nouveau projet ASP.NET 4.5.2 (modèle MVC) avec Visual Studio 2015.

Étape 2 (Supprimer le regroupement / l'optimisation du projet)

Étape 2.1

Désinstallez les packages Nuget suivants:

• amorcer
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• Moderniser
• Répondre

Étape 2.2

Supprimer App_Start\BundleConfig.csdu projet.

Étape 2.3

Retirer

using System.Web.Optimization;

et

BundleConfig.RegisterBundles(BundleTable.Bundles);

de Global.asax.cs

Étape 2.4

Retirer

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

de Views\Web.config

Étape 2.5

Supprimer les liaisons d'assemblage pour System.Web.Optimizationet WebGreasedeWeb.config

Étape 3 (Ajouter bower au projet)

Étape 3.1

Ajouter un nouveau package.jsonfichier au projet ( NPM configuration filemodèle d'élément)

Étape 3.2

Ajouter bowerà devDependencies:

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

Le package bower est automatiquement installé lors de l' package.jsonenregistrement.

Étape 4 (Configurer le bower)

Étape 4.1

Ajouter un nouveau bower.jsonfichier au projet ( Bower Configuration filemodèle d'élément)

Étape 4.2

Ajouter bootstrap, jquery-validation-unobtrusive, modernizret respondaux dépendances:

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

Ces packages et leurs dépendances sont automatiquement installés lors de l' bower.jsonenregistrement.

É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" />

Étape 5.2

Remplacer

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

avec

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

Étape 5.3

Remplacer

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

avec

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

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

É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 et réduction

Dans les commentaires ci-dessous, LavaHot recommande l' extension Bundler & Minifier en remplacement du bundler par défaut que je supprime à l'étape 2. Il recommande également cet article sur le regroupement avec Gulp.

Ce n'est en fait pas trop différent. C'est juste qu'il y a une meilleure prise en charge de tous ces éléments dans Visual Studio, par exemple lorsque vous ajoutez de nouveaux éléments, vous avez des modèles pour les fichiers de configuration bower ou npm. Vous avez également des modèles pour les fichiers de configuration gulp ou grunt.
Mais l'appel des tâches grunt / gulp et leur liaison pour générer des événements se fait toujours avec Task Runner Explorer, tout comme dans VS 2013.