Microsoft Ajax Minifier, 비쥬얼스튜디오(Visual Studio) 통합 빌드
웹개발을 하다 보면 .js 파일 또는 .css파일들의 크기를 줄이기 위해 여러가지 툴을 이용해서 경량화를 할 것이다. 나와 같이 비쥬얼 스튜디오(Visual Studio)를 이용하여 개발하고 있는 개발자들이라면 좀더 편하고 쉽게 경량화를 할 수 있는 방법에 대해 알아 보도록 하겠다.
비쥬얼스튜디오와 잘 통합되어 .js, .css파일들의 min파일로 만들어 주는 "Microsoft Ajax Minifier" 있다. 이는 비쥬얼스튜디오 빌드 작업과의 통합을 시킬수 있으며, 콘솔 커맨드 기능, DLL참조를 통한 프로그래밍이 가능하다.
ㅁ 사용 방법
비쥬얼스튜디오 2010이상 설치되어 있다면, 기본적으로 설치가 되어 있을 것이다. 만약 2010이하 버전을 사용하고 있다면 따로 설치 파일을 다운로드 받아 설치해야 한다. (다운로드 주소 : http://ajaxmin.codeplex.com/) 그럼 이제 순서대로 어떻게 적용 할 수 있는지 알아 보자.
1. 프로젝트 구성 확인
[그림 1 - 프로젝트 구성 화면]
[그림 1]은 프로젝트 구성 내용을 보여준다. 그림에 보면 .js파일들이 Scripts폴더와 Res 폴더 밑에 js폴더에 있는 것이 확인 되며, .css파일들은 Content폴더와 Res폴더 밑에 css폴더에 있다.
2. 프로젝트 언로드
[그림 2 - 프로젝트 언로드]
프로젝트 파일에서 우클릭을 해서 [그림2]와 같이 메뉴가 나타나게 한다. 그리고 "프로젝트 언로드" 메뉴을 클릭한다. 그럼 해당 솔루션 파일에서 프로젝트가 비활성화된 상태로 변할 것이다.
3. 프로젝트 구성 편집
[그림 3 - 프로젝트 구성 편집]
비활성화되어 있는 프로젝트를 우클릭해서 "편집 [프로젝트이름].csproj"를 클릭해서 편집 창이 열리도록 한다.
편집창이 열리면 프로젝트를 구성하는 엘리먼트들이 나타날 것 이다. 그럼 마우스를 쭈욱 내려서 <project>엘리먼트가 끝나는 바로 앞에 아래 설정을 정의 하자.
<UsingTask TaskName="AjaxMin" AssemblyFile="$(SolutionDir)_Lib\MicrosoftAjax\AjaxMinTask.dll" /> <Target Name="AfterBuild"> <ItemGroup> <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" /> <CSS Include="**\*.css" Exclude="**\*.min.css;Content\*.css" /> </ItemGroup> <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" /> </Target> |
- UsingTask : UsingTask 엘리먼트는 해당 프로젝트에서 AjaxMinTask.dll을 사용 할 것을 나타낸다. UsingTask 말고 Import 엘리먼트를 사용할 수도 있다. AssemblyFile는 현재 솔류선위치에서 AjaxMinTask.dll의 위치까지 경로를 지정해 준다.
- Target : 빌드 타켓을 나타낸다. 이름에서 AfterBuild는 빌드이후에 수행할 것을 의미한다.
- ItemGroup : ItemGroup 엘리먼트는 JS, CSS 엘리먼트를 하위에 두어 작업을 정의한다.
- JS : Include는 작업을 수행할 파일들을 정의 한다. "**\*.js"는 모든 파일을 지정함을 뜻한다. Exclude는 작업에서 제외될 사항을 정의하며, "**\*.min.js;Scripts\*.js"는 .min.js 파일로 되어 있는 것과 Scripts폴더 하위 .js파일은 제외 한다는 뜻이다.
- CSS : JS 설정과 동일하다.
- AjaxMin : 실행을 위한 속성 타켓들을 지정해 준다.
4. 프로젝트 로드
[그림 5 - 프로젝트 다시 로드]
모든 설정이 끝났다면 프로젝트 파일에서 우클릭, 프로젝트 다시 로드 메뉴를 클리해서 프로젝트를 활성화 시킨다.
5. 프로젝트 빌드
[그림 6 - 프로젝트 빌드]
프로젝트를 빌드를 진행하다. 빌드가 끝나면 아래 그림과 같이 프로젝트에 포함되지 않은 모든 파일 표시를 해본다.
[그림 7 - 모든 파일 표시]
[그림 7]과 같이 모든 파일 표시를 클릭하게되면 프로젝트에 포함되지 못한 파일들이 보일 것이다. 정상적으로 빌드가 되어 AjaxMin이 이루어 졌다면 아래 그림과 같이 Res폴더의 css폴더와 js폴더에 .min파일이 생겼을 것이다.
[그림 8 - min파일 생성]
해당 min파일들을 우클릭해서 프로젝트에 포함시키도록 한다.
[그림 9 - 프로젝트 포함]
이상 "Microsoft Ajax Minifier"에 대한 사용 방법에 대해 간단하게 알아 보았다.
ㅁ 참고 자료
https://thefrontend.wordpress.com/2012/02/02/minify-javascript-and-css-files-when-publishing-web-applications/
https://msdn.microsoft.com/en-us/library/t4w159bs.aspx