Незважаючи на те, що відповідь Лівіу Костеа є правильною, мені все одно знадобився досить довгий час, щоб зрозуміти, як це робиться насправді. Отже, ось мій покроковий посібник, починаючи з нового проекту ASP.NET 4.5.2 MVC. Цей посібник включає управління пакетами на стороні клієнта за допомогою bower, але (поки що) не охоплює об'єднання / бурчання / ковтання.
Крок 1 (Створення проекту)
Створіть новий проект ASP.NET 4.5.2 (шаблон MVC) за допомогою Visual Studio 2015.
Крок 2 (Видалити зв’язування / оптимізацію з проекту)
Крок 2.1
Видаліть наступні пакети Nuget:
- завантажувальний ремінь
- Microsoft.jQuery.Unobstrusive.Validation
- jQuery.Проверка
- jQuery
- Microsoft.AspNet.Web.Optimization
- WebGrease
- Antlr
- Модернізр
- Відповідь
Крок 2.2
Вилучити App_Start\BundleConfig.csз проекту.
Крок 2.3
Видалити
using System.Web.Optimization;
і
BundleConfig.RegisterBundles(BundleTable.Bundles);
від Global.asax.cs
Крок 2.4
Видалити
<add namespace="System.Web.Optimization"/>
від Views\Web.config
Крок 2.5
Зніміть монтажні прив’язки для System.Web.Optimizationі WebGreaseзWeb.config
Крок 3 (Додайте bower до проекту)
Крок 3.1
Додати новий package.jsonфайл до проекту ( NPM configuration fileшаблон елемента)
Крок 3.2
Додати bowerдо devDependencies:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
Пакет Bower автоматично встановлюється при package.jsonзбереженні.
Крок 4 (Налаштування bower)
Крок 4.1
Додати новий bower.jsonфайл до проекту ( Bower Configuration fileшаблон елемента)
Крок 4.2
Додати bootstrap, jquery-validation-unobtrusive, modernizrі respondв залежності:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
Ці пакети та їх залежності автоматично встановлюються при bower.jsonзбереженні.
Крок 5 (Змінити Views\Shared\_Layout.cshtml)
Крок 5.1
Замінити
@Styles.Render("~/Content/css")
з
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
Крок 5.2
Замінити
@Scripts.Render("~/bundles/modernizr")
з
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
Крок 5.3
Замінити
@Scripts.Render("~/bundles/jquery")
з
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
Крок 5.4
Замінити
@Scripts.Render("~/bundles/bootstrap")
з
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
Крок 6 (Змінення інших джерел)
У всіх інших поданнях замінити
@Scripts.Render("~/bundles/jqueryval")
з
<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>
корисні посилання
Упаковка та мініфікація
У коментарях нижче LavaHot рекомендує розширення Bundler & Minifier як заміну роздільнику за замовчуванням, який я видаляю на кроці 2. Він також рекомендує цю статтю про роз'єднання з Gulp.