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 프로젝트에서 시작하는 단계별 가이드입니다.이 안내서에는 바우어를 사용한 클라이언트 측 패키지 관리가 포함되어 있지만 번들링/그룬트/걸프에 대해서는 다루지 않습니다.

1단계(프로젝트 생성)

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

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

2.1단계

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

• 부트스트랩
• 마이크로소프트.jQuery. 방해가 되지 않습니다.확인
• jQuery.검증
• jQuery
• 마이크로소프트.AsNet.Web.최적화
• 웹 그리스
• 앤틀러
• 모데니즈르
• 응답하라

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그리고.WebGreaseWeb.config

3단계(프로젝트에 바우어 추가)

3.1단계

추가하기package.json project (파일 투 프로젝트NPM configuration file항목 템플릿)

3.2단계

더하다bowerdevDependencies:

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

다음과 같은 경우에 바우어 패키지가 자동으로 설치됩니다.package.json저장되었습니다.

4단계(보어 구성)

4.1단계

추가하기bower.json project (파일 투 프로젝트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저장되었습니다.

수정)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/
• https://web.archive.org/web/20190611132417/http ://old.devkimchi.com:80/2015/01/06/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/

---

번들링 및 최소화

아래 의견에서 LavaHot은 2단계에서 제거한 기본 번들러의 대체품으로 번들러 & 미니파이어 확장을 권장합니다.그는 또한 굴프와의 번들링에 관한 이 기사를 추천합니다.

그것은 사실 크게 다르지 않습니다.예를 들어 Visual Studio에서 새 항목을 추가할 때 bower 또는 npm 구성 파일에 대한 템플릿이 있는 경우와 같이 이러한 모든 항목을 보다 효율적으로 지원할 수 있습니다.또한 gulp 또는 grunt 구성 파일에 대한 템플릿도 있습니다.
그러나 실제로는 VS 2013에서와 마찬가지로 Task Runner Explorer를 사용하여 Grunt/Gulp 작업을 호출하고 이벤트를 빌드하도록 바인딩할 수 있습니다.

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