Использование 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   89  

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 и respond to зависимости:

{
  "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.