Использование Grunt, Bower, Gulp, NPM с Visual Studio 2015 для a ASP.NET 4.5 проект
Visual Studio 2015 поставляется со встроенной поддержкой таких инструментов, как Grunt, Bower, Gulp и NPM для ASP.NET 5 проектов.
однако, когда я создаю ASP.NET 4.5.2 проект с использованием Visual Studio 2015 не использует эти инструменты. Я хотел бы использовать bower вместо nuget для управления пакетами на стороне клиента.
Я могу найти информацию об использовании этих инструментов с Visual Studio 2013 (см. Этот вопрос, например). Но я думаю, что процедура отличается для Visual Studio 2015 так как он встроен в поддержку этих инструментов.
2 ответов:
пока ответ Ливиу Костя правильно, мне все равно потребовалось довольно много времени, чтобы понять, как это на самом деле делается. Итак, вот мое пошаговое руководство, начиная с нового ASP.NET 4.5.2 проект MVC. Это руководство включает в себя управление пакетами на стороне клиента с помощью bower, но (пока) не охватывает пакетирование/grunt/gulp.
Шаг 1 (Создать Проект)
создать новый ASP.NET 4.5.2 проект (шаблон MVC) с Visual Studio 2015.
Шаг 2 (Удалить пакетирование / оптимизацию из проекта)
шаг 2.1
удалите следующие пакеты Nuget:
- bootstrap
- Microsoft.jQuery.Ненавязчиво.Проверка
- jQuery.Проверка
- jQuery
- Microsoft.сеть САШ.Сеть.Оптимизация
- WebGrease
- Antlr
- Modernizr
- ответить
шаг 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 (Добавить Бауэр в проект)
шаг 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иrespondto зависимости:{ "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 рекомендует упаковщик & английское сокращение Cups расширение в качестве замены для комплекта по умолчанию, который я удаляю в шаге 2. Он также рекомендует в этой статье на связывание с глотком.
Это на самом деле не слишком отличается. Это просто, что есть лучшая поддержка для всех этих внутри Visual Studio, например, при добавлении новых элементов у вас есть шаблоны для Bower или npm config файлов. Также у вас есть шаблоны для файлов конфигурации gulp или grunt.
но на самом деле вызов задач grunt/gulp и привязка их к событиям сборки по-прежнему выполняется с помощью Task Runner Explorer, как и в VS 2013.
Comments