Использование Grunt, Bower, Gulp, NPM с Visual Studio 2015 для проекта ASP.NET 4.5

90

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 процедура отличается, поскольку в нее встроена поддержка этих инструментов.

Роберт Хегнер
источник

Ответы:

128

Хотя ответ Ливиу Костя правильный, мне все же потребовалось некоторое время, чтобы понять, как это делается на самом деле. Итак, вот мое пошаговое руководство, начиная с нового проекта ASP.NET 4.5.2 MVC. Это руководство включает в себя управление пакетами на стороне клиента с помощью bower, но (пока) не охватывает пакет / 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 в качестве замены сборщика по умолчанию, который я удаляю на шаге 2. Он также рекомендует эту статью о сборке с Gulp.

Роберт Хегнер
источник
6
Спасибо большое. Я прав в том, что пропущен один шаг: как сопоставить ~ / wwwroot с /../bower_components (или конфигурацию gulp / grunt, как переместить пакеты bower в «~ / wwwroot»). Не могли бы вы добавить этот шаг и описать, как бы вы рекомендуете организовать код js / css для работы с IIS Express в среде VS2015?
Роман Покровский
Когда вы создаете bower.jsonфайл в Visual Studio 2015, он также автоматически создает bowerrcфайл, который переопределяет местоположение по умолчанию для установки bower с bower_componentsвwwwroot/lib
Sagebrush GIS
1
Так что бандлинг мне очень пригодился. Теперь, когда вы удалили пакет по умолчанию, я хотел бы порекомендовать Bundler & Minifier заменить его. Он использует Task Runner Explorer и имеет файл конфигурации, аналогичный npm и bower. Он также является частью Web Essentials, так что, возможно, он у вас уже установлен.
LavaHot 08
1
Вот хорошая статья по теме, которую нужно связать с gulp.
LavaHot 08
1
Спасибо за подробную информацию @SagebrushGIS! Я также изучаю, как добавить управление пакетами Bower в мой проект MVC. Я добавил bower.json через VS2015, но я не вижу файла bowerrc, о котором вы говорите. Какие-либо шаги, которые я мог пропустить, или где мне найти этот файл? В качестве временного решения я использую: <link rel = "stylesheet" href = "~ / bower_components / bootstrap / dist / css / bootstrap.min.css" />
Гвидо Керстен
4

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

Ливиу Костя
источник
Думаю, я до сих пор не понимаю, как вы устанавливаете пакеты npm в VS с установленным инструментом. Каждый раз, когда я пытаюсь установить .npm, он говорит, что мой проект не настроен для узла или чего-то еще
Мастро
вам нужно сначала создать package.json в корневой папке. Я обычно создаю это в корне целевого проекта как родственник файла csproj. тогда вы можете использовать команды npm
Роман,