Asp.net의 번들 기능(bundle)은 MVC나 WebForm없이도 사용 가능합니다.
1. 프로젝트를 생성
프로젝트를 생성할 때 핵심 참조를 'Web API'만 합니다.
프로젝트에 'Test.js'를 추가하고 아래 코드를 넣어 줍니다.
|
1
2
3
4 |
var funCall = function()
{
alert('호출 되었습니다.');
} |
cs |
프로젝트에 'Test.css'를 추가하고 아래 코드를 넣어 줍니다.
|
1
2
3
4 |
body {
background-color:#ff6a00;
}
|
cs |
2. 참조 추가
누겟으로 'Optimization'를 검색해 봅니다.
'Microsoft.AspNet.Web.Optimization'을 설치하시면 됩니다.
한국어버전은 'Microsoft.AspNet.Web.Optimization.ko'입니다.
패키지 관리 콘솔로 설치하려면 아래 명령어를 사용합니다.
|
1
2 |
#누겟페키지에서 찾아서 사용가능
Install-Package Microsoft.AspNet.Web.Optimization |
cs |
3. 'BundleConfig'추가
'BundleConfig.cs'가 자동으로 생성되지 않으므로 'App_Start'폴더에 'BundleConfig'라는 클래스를 추가해줍니다.
'BundleConfig.cs'를 열어 아래 코드를 넣어 줍니다.
|
1
2
3
4
5
6
7
8
9 |
public class BundleConfig
{
// 번들 작성에 대한 자세한 내용은 http://go.microsoft.com/fwlink/?LinkId=301862 링크를 참조하십시오.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/BundleStyle").Include("~/Test.css"));
bundles.Add(new ScriptBundle("~/BundleScripts").Include("~/Test.js"));
}
} |
cs |
4. 'Global.asax'에 추가
이제 이렇게 만든 번들을 등록하기 위해 'Global.asax'에서 'RegisterBundles'를 호출해야 합니다.
'Global.asax'을 열어 'Application_Start'를 아래와 같이 코딩 합니다.
|
1
2
3
4
5 |
protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
BundleConfig.RegisterBundles(BundleTable.Bundles);
} |
cs |
5. 테스트 페이지 작성
html파일을 'index.html'로 추가해 줍니다.
그리고 아래와 같이 입력합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="/BundleScripts" type="text/javascript"></script>
<link href="/BundleStyle" rel="stylesheet">
</head>
<body>
<button onclick="funCall()">호출!</button>
</body>
</html>
|
cs |
스크립트와 스타일시트의 주소는 번들로 설정된 주소로으로 연결해 줍니다.
레이저(R)에서 사용할때 '@Styles', '@Scripts' 같은 곳에서 참조를 찾을 수 없다는 에러가 난다면 레이저 페이지에서도 유징(using)을 해야 합니다.
뷰의 상단에 다음과 같이 유징을 추가합니다.
|
1 |
@using System.Web.Optimization; |
cs |
이제 실행해보면 아래와 같이 작동하는 것을 볼 수 있습니다.
마무리
테스트 프로젝트 다운로드
NoneMVCBundle.zip패키지 복구해야 사용 가능합니다.
사실
이런 변태적인 모양이 되도록 사용할 필요가 있는가?
에 대한 의문이 있긴 합니다.
자바스크립트와 스타일시트를 CDN모양으로 사용해야 하는데 그렇다면 번들을 돌릴 독립적인 웹사이트 한 개를 세팅해야 한다는 의미가 됩니다.
(번들과 html페이지를 같은 웹사이트에 두면 되긴합니다.)
테스트도 엄청 힘들다는 소리죠 ㅎㅎㅎㅎ
asp.net의 ui관련 기능을 쓰지 않기 때문에 자동화가 되지 않죠.
한마디로 수작업해야 한다는 것입니다 ㅎㅎㅎ
참고 자료
stackoverflow - Bundling and minification without ASP.NET MVC
microsoft ASP.NET - Bundling and Minification
stackoverflow - ASP.NET Bundles in regular html?
