web-dev-qa-db-fra.com

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

Visual Studio 2015 est livré avec un support intégré pour des outils tels que Grunt, Bower, Gulp et NPM pour les projets 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. J'aimerais 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 this question par exemple). Mais je suppose que la procédure est différente pour Visual Studio 2015, car il prend en charge de manière intégrée ces outils.

asp.netgulpbowervisual-studio-2015asp.net-4.5
90
Robert Hegner

Bien que la réponse de de Liviu Costea soit correcte, il m'a encore fallu un certain temps pour comprendre comment cela se passait réellement. 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) les offres groupées/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 l’assemblage/l’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
  • Moderniser
  • Répondre

Étape 2.2

Retirer App_Start\BundleConfig.cs du 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.Optimization et WebGrease de Web.config

Étape 3 (Ajouter un bower au projet)

Étape 3.1

Ajouter un nouveau package.json fichier à projeter (NPM configuration file modèle d'élément)

Étape 3.2

Ajoutez bower à devDependencies:

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

Le paquet bower est automatiquement installé quand package.json est enregistré.

Étape 4 (Configurer Bower)

Étape 4.1

Ajouter un nouveau bower.json fichier à projeter (Bower Configuration file modèle d'élément)

Étape 4.2

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

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

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

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

@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

Regroupement et minification

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

128
Robert Hegner

En réalité, ce n'est pas trop différent. Il existe simplement 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 aussi des modèles pour les fichiers de configuration gulp ou grunt.
Mais l’appel de tâches Grunt/Gulp et leur liaison pour la création d’événements se font toujours avec Task Runner Explorer, comme dans VS 2013.

4
Liviu Costea