Использование Grunt, Bower, Gulp, NPM с Visual Studio 2015 для проекта 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, поскольку она встроила поддержку этих инструментов.

ОТВЕТЫ

Ответ 1

В то время как ответ Liviu Costea верен, мне все же понадобилось некоторое время, чтобы выяснить, как это делается на самом деле. Итак, вот мой пошаговый справочник, начинающийся с нового проекта ASP.NET 4.5.2 MVC. Это руководство включает в себя управление пакетами на стороне клиента с помощью беседки, но пока не закрывает связывание /grunt/ gulp.

Шаг 1 (Создать проект)

Создайте новый проект ASP.NET 4.5.2 (шаблон MVC) с помощью Visual Studio 2015.

Шаг 2 (Удалить объединение/Оптимизация из проекта)

Шаг 2.1

Удалите следующие пакеты Nuget:

  • самозагрузки
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • JQuery
  • Microsoft.AspNet.Web.Optimization
  • 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 (настройка беседки)

Шаг 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 extension в качестве замены для связующего по умолчанию, который я удаляю на шаге 2. Он также рекомендует эту статью по связыванию с Gulp.

Ответ 2

На самом деле это не слишком отличается. Это просто, что лучше поддерживать все это внутри Visual Studio, например, когда вы добавляете новые элементы, у вас есть шаблоны для конфигурационных файлов bower или npm. Кроме того, у вас есть шаблоны для gulp или grunt конфигурационных файлов.
Но фактически вызов задач grunt/gulp и привязка их к построению событий по-прежнему выполняется с помощью Task Runner Explorer, как и в VS 2013.