Utilisation de Grunt, Bower, Gulp, NPM avec Visual Studio 2015 pour un projet ASP.NET 4.5

Visual Studio 2015 prend en charge des outils tels que Grunt, Bower, Gulp et NPM for ASP.NET 5.

Toutefois, 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 paquets 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 elle prend en charge ces outils.

Bien que la réponse de Liviu Costea soit correcte, il m’a fallu pas mal de temps pour comprendre comment cela se fait. Voici donc mon guide étape par étape à partir d’un nouveau projet ASP.NET 4.5.2 MVC. Ce guide comprend la gestion des packages côté client à l’aide de Bower mais ne couvre pas (encore) groupage / 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 / optimisation du projet)

Étape 2.1

Désinstallez les packages Nuget suivants:

  • bootstrap
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • Antlr
  • Modernizr
  • Répondre

Étape 2.2

Supprimez App_Start\BundleConfig.cs du projet.

Étape 2.3

Retirer

 using System.Web.Optimization; 

et

 BundleConfig.RegisterBundles(BundleTable.Bundles); 

à partir de Global.asax.cs

Étape 2.4

Retirer

  

à partir de Views\Web.config

Étape 2.5

Supprimer les liaisons d’assemblage pour System.Web.Optimization et WebGrease de Web.config

Étape 3 (Ajouter bower au projet)

Étape 3.1

Ajouter un nouveau fichier package.json au projet (modèle d’élément de NPM configuration file )

É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é lorsque package.json est enregistré.

Étape 4 (Configurer bower)

Étape 4.1

Ajouter un nouveau fichier bower.json au projet (modèle d’élément du Bower Configuration file )

Étape 4.2

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

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

Ces packages et leurs dépendances sont automatiquement installés lorsque bower.json est enregistré.

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

Étape 5.1

Remplacer

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

avec

   

Étape 5.2

Remplacer

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

avec

  

Étape 5.3

Remplacer

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

avec

  

Étape 5.4

Remplacer

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

avec

   

Étape 6 (Modifier d’autres sources)

Dans toutes les autres vues remplacer

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

avec

   

Liens utiles


Bundling & Minifying

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 pas vraiment différent. C’est juste qu’il y a un meilleur support pour 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 de tâches grunt / gulp et leur liaison pour créer des événements se fait toujours avec Task Runner Explorer, comme dans VS 2013.