ASP.NET 4.5 프로젝트를 위해 Visual Studio 2015와 함께 Grunt, Bower, Gulp, NPM 사용

Question 1

Visual Studio 2015는 ASP.NET 5 프로젝트 용 Grunt, Bower, Gulp 및 NPM과 같은 도구를 기본적으로 지원합니다.

그러나 Visual Studio 2015를 사용하여 ASP.NET 4.5.2 프로젝트를 만들 때 이러한 도구를 사용하지 않습니다. 클라이언트 측 패키지를 관리하기 위해 nuget 대신 bower를 사용하고 싶습니다.

Visual Studio 2013에서 이러한 도구를 사용하는 방법에 대한 정보를 찾을 수 있습니다 ( 예 : 이 질문 참조 ). 그러나 Visual Studio 2015에서는 이러한 도구에 대한 지원이 내장되어 있기 때문에 절차가 다른 것 같습니다.

Question 2

Liviu Costea의 대답 은 정확 하지만 실제로 어떻게 수행되는지 알아내는 데는 여전히 상당한 시간이 걸렸습니다. 그래서 여기에 새로운 ASP.NET 4.5.2 MVC 프로젝트에서 시작하는 단계별 가이드가 있습니다. 이 가이드에는 bower를 사용한 클라이언트 측 패키지 관리가 포함되어 있지만 번들링 / grunt / gulp에 대해서는 아직 다루지 않습니다.

1 단계 (프로젝트 생성)

Visual Studio 2015를 사용하여 새 ASP.NET 4.5.2 프로젝트 (MVC 템플릿)를 만듭니다.

2 단계 (프로젝트에서 번들링 / 최적화 제거)

2.1 단계

다음 Nuget 패키지를 제거합니다.

부트 스트랩
Microsoft.jQuery.Unobstrusive.Validation
jQuery.Validation
jQuery
Microsoft.AspNet.Web.Optimization
Web 그리스
Antlr
모 더니 저
응창 성가

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 는 2 단계에서 제거하는 기본 번 들러 의 대체물로 Bundler & Minifier 확장 을 권장 합니다 .

Question 3

실제로 너무 다르지 않습니다. 예를 들어 새 항목을 추가 할 때 bower 또는 npm 구성 파일에 대한 템플릿이있는 경우와 같이 Visual Studio 내부에서 이러한 모든 기능을 더 잘 지원할 수 있습니다. 또한 gulp 또는 grunt 구성 파일에 대한 템플릿이 있습니다.
그러나 실제로 grunt / gulp 작업을 호출하고 빌드 이벤트에 바인딩하는 작업은 VS 2013에서와 마찬가지로 Task Runner Explorer를 사용하여 수행됩니다.