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


90

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.

Réponses:


128

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


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.


6
Merci beaucoup. Ai-je raison de dire qu'il y a une étape manquée: comment mapper ~ / wwwroot à /../bower_components (ou gulp / grunt config comment déplacer les paquets bower vers "~ / wwwroot") Pourriez-vous ajouter cette étape et décrire comment vous le feriez recommande d'organiser le code js / css pour l'exécution avec IIS Express dans l'environnement VS2015?
Roman Pokrovskij

Lorsque vous créez un bower.jsonfichier via Visual Studio 2015, il crée également automatiquement un bowerrcfichier, qui remplace l'emplacement par défaut pour les installations de bower de bower_componentsàwwwroot/lib
Sagebrush GIS

1
Il s'avère donc que le regroupement m'est très utile. Maintenant que vous avez supprimé le bundler par défaut, j'aimerais recommander Bundler & Minifier pour le remplacer. Il utilise l'explorateur de Task Runner et possède un fichier de configuration similaire à npm et bower. Il fait également partie de Web Essentials, vous l'avez peut-être déjà installé.
LavaHot

1
Voici un bel article sur le sujet à regrouper avec gulp.
LavaHot

1
Merci pour les informations détaillées @SagebrushGIS! J'étudie également comment ajouter la gestion des packages Bower à mon projet MVC. J'ai ajouté le bower.json via VS2015, mais je ne vois pas le fichier bowerrc dont vous parlez. Des étapes que je pourrais manquer ou où dois-je trouver ce fichier? Pour le moment, j'utilise: <link rel = "stylesheet" href = "~ / bower_components / bootstrap / dist / css / bootstrap.min.css" />
Guido Kersten

4

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.


Je suppose que je ne vois toujours pas comment vous installez les packages npm dans VS avec l'outil installé. Chaque fois que j'essaie une installation .npm, cela indique que mon projet n'est pas configuré pour le nœud ou autre
Mastro

vous devez d'abord créer package.json dans le dossier racine. Je crée généralement cela à la racine du projet cible en tant que frère du fichier csproj. puis, vous pouvez utiliser les commandes npm
Roman
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.