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

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

---

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에서는 이러한 도구에 대한 지원이 내장되어 있기 때문에 절차가 다른 것 같습니다.

---

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>

---

유용한 링크

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

---

Bundling & Minifying

In the comments below LavaHot recommends the Bundler & Minifier extension as a replacement for the default bundler which I remove in step 2. He also recommends this article on bundling with Gulp.

---

It is actually not too different. It is just that there is better support for all these inside Visual Studio, for example when you add new items you have templates for bower or npm config files. Also you have templates for gulp or grunt configuration files.
But the actually calling of grunt/gulp tasks and binding them to build events is still done with Task Runner Explorer, just like in VS 2013.

참고URL : https://stackoverflow.com/questions/31872622/using-grunt-bower-gulp-npm-with-visual-studio-2015-for-a-asp-net-4-5-project