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.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
deWeb.config
Étape 3 (Ajouter bower au projet)
Étape 3.1
Ajouter un nouveau package.json
fichier au 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"
}
}
Le package bower est automatiquement installé lors de l' package.json
enregistrement.
Étape 4 (Configurer le bower)
Étape 4.1
Ajouter un nouveau bower.json
fichier au projet ( 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 packages et leurs dépendances sont automatiquement installés lors de l' bower.json
enregistrement.
É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.