Visual Studio 2015 ma wbudowaną obsługę narzędzi takich jak Grunt, Bower, Gulp i NPM dla projektów ASP.NET 5.

Jednak gdy tworzę projekt ASP.NET 4.5.2 przy użyciu programu Visual Studio 2015, nie używa on tych narzędzi. Chciałbym używać bower zamiast nuget do zarządzania pakietami po stronie klienta.

Mogę znaleźć informacje o używaniu tych narzędzi z Visual Studio 2013 (zobacz na przykład to pytanie). Ale wydaje mi się, że procedura jest inna w przypadku Visual Studio 2015, ponieważ ma wbudowaną obsługę tych narzędzi.

Chociaż odpowiedź Liviu Costea jest prawidłowa, zajęło mi trochę czasu, zanim zrozumiałem, jak to się właściwie robi. Oto mój przewodnik krok po kroku, zaczynając od nowego projektu ASP.NET 4.5.2 MVC. Ten przewodnik obejmuje zarządzanie pakietami po stronie klienta za pomocą bower, ale (jeszcze) nie obejmuje tworzenia pakietów / grunt / gulp.

Krok 1 (Utwórz projekt)

Utwórz nowy projekt ASP.NET 4.5.2 (szablon MVC) w programie Visual Studio 2015.

Krok 2 (Usuń pakietowanie / optymalizację z projektu)

Krok 2.1

Odinstaluj następujące pakiety NuGet:

• bootstrap
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• Modernizr
• Odpowiadać

Krok 2.2

Usuń App_Start\BundleConfig.csz projektu.

Krok 2.3

Usunąć

using System.Web.Optimization;

i

BundleConfig.RegisterBundles(BundleTable.Bundles);

z Global.asax.cs

Krok 2.4

Usunąć

<add namespace="System.Web.Optimization"/>

z Views\Web.config

Krok 2.5

Usuń powiązania zespołu dla System.Web.Optimizationi WebGreasezWeb.config

Krok 3 (Dodaj altankę do projektu)

Krok 3.1

Dodaj nowy package.jsonplik do projektu ( NPM configuration fileszablon pozycji)

Krok 3.2

Dodaj bowerdo devDependencies:

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "bower": "1.4.1"
  }
}

Pakiet altany jest instalowany automatycznie po package.jsonzapisaniu.

Krok 4 (Konfiguracja bower)

Krok 4.1

Dodaj nowy bower.jsonplik do projektu ( Bower Configuration fileszablon pozycji)

Krok 4.2

Dodaj bootstrap, jquery-validation-unobtrusive, modernizri responddo zależności:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "*",
    "jquery-validation-unobtrusive": "*",
    "modernizr": "*",
    "respond": "*"
  }
}

Te pakiety i ich zależności są automatycznie instalowane podczas bower.jsonzapisywania.

Krok 5 (Modyfikuj Views\Shared\_Layout.cshtml)

Krok 5.1

Zastąpić

@Styles.Render("~/Content/css")

z

<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />

Krok 5.2

Zastąpić

@Scripts.Render("~/bundles/modernizr")

z

<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>

Krok 5.3

Zastąpić

@Scripts.Render("~/bundles/jquery")

z

<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>

Krok 5.4

Zastąpić

@Scripts.Render("~/bundles/bootstrap")

z

<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

Krok 6 (Modyfikacja innych źródeł)

We wszystkich innych widokach zamień

@Scripts.Render("~/bundles/jqueryval")

z

<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>

Przydatne linki

• http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
• http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
• http://devkimchi.com/1511/integrating-grunt-and-bower-with-visual-studio-2013/
• http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
• http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
• http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/

Wiązanie i minifikacja

W komentarzach poniżej LavaHot zaleca rozszerzenie Bundler & Minifier jako zamiennik domyślnego pakietu, który usunąłem w kroku 2. Zaleca również ten artykuł na temat łączenia z Gulp.

Właściwie to nie jest zbyt różne. Po prostu istnieje lepsza obsługa wszystkich tych elementów w programie Visual Studio, na przykład podczas dodawania nowych elementów masz szablony dla plików konfiguracyjnych bower lub npm. Masz również szablony dla plików konfiguracyjnych gulp lub grunt.
Ale w rzeczywistości wywoływanie zadań grunt / gulp i wiązanie ich z budowaniem wydarzeń nadal odbywa się za pomocą Task Runner Explorer, tak jak w VS 2013.