Chociaż odpowiedź Liviu Costea jest prawidłowa, zajęło mi trochę czasu, zanim zrozumiałem, jak to się właściwie robi. Oto mój przewodnik krok po kroku, zaczynając od nowego projektu ASP.NET 4.5.2 MVC. Ten przewodnik obejmuje zarządzanie pakietami po stronie klienta za pomocą bower, ale (jeszcze) nie obejmuje tworzenia pakietów / grunt / gulp.
Krok 1 (Utwórz projekt)
Utwórz nowy projekt ASP.NET 4.5.2 (szablon MVC) w programie Visual Studio 2015.
Krok 2 (Usuń pakietowanie / optymalizację z projektu)
Krok 2.1
Odinstaluj następujące pakiety NuGet:
- bootstrap
- Microsoft.jQuery.Unobstrusive.Validation
- jQuery.Validation
- jQuery
- Microsoft.AspNet.Web.Optimization
- WebGrease
- Antlr
- Modernizr
- Odpowiadać
Krok 2.2
Usuń App_Start\BundleConfig.csz projektu.
Krok 2.3
Usunąć
using System.Web.Optimization;
i
BundleConfig.RegisterBundles(BundleTable.Bundles);
z Global.asax.cs
Krok 2.4
Usunąć
<add namespace="System.Web.Optimization"/>
z Views\Web.config
Krok 2.5
Usuń powiązania zespołu dla System.Web.Optimizationi WebGreasezWeb.config
Krok 3 (Dodaj altankę do projektu)
Krok 3.1
Dodaj nowy package.jsonplik do projektu ( NPM configuration fileszablon pozycji)
Krok 3.2
Dodaj bowerdo devDependencies:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
Pakiet altany jest instalowany automatycznie po package.jsonzapisaniu.
Krok 4 (Konfiguracja bower)
Krok 4.1
Dodaj nowy bower.jsonplik do projektu ( Bower Configuration fileszablon pozycji)
Krok 4.2
Dodaj bootstrap, jquery-validation-unobtrusive, modernizri responddo zależności:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
Te pakiety i ich zależności są automatycznie instalowane podczas bower.jsonzapisywania.
Krok 5 (Modyfikuj Views\Shared\_Layout.cshtml)
Krok 5.1
Zastąpić
@Styles.Render("~/Content/css")
z
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
Krok 5.2
Zastąpić
@Scripts.Render("~/bundles/modernizr")
z
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
Krok 5.3
Zastąpić
@Scripts.Render("~/bundles/jquery")
z
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
Krok 5.4
Zastąpić
@Scripts.Render("~/bundles/bootstrap")
z
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
Krok 6 (Modyfikacja innych źródeł)
We wszystkich innych widokach zamień
@Scripts.Render("~/bundles/jqueryval")
z
<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>
Przydatne linki
Wiązanie i minifikacja
W komentarzach poniżej LavaHot zaleca rozszerzenie Bundler & Minifier jako zamiennik domyślnego pakietu, który usunąłem w kroku 2. Zaleca również ten artykuł na temat łączenia z Gulp.