이번 컬럼은 ASP.NET Core와는 직접적으로 관련이 있는 내용은 아닙니다만, 클라이언트 측 기능 구현을 위해서는 반드시 알아두어야 할 빌드 시스템인 Gulp 관련 컬럼입니다.

모든 컬럼은 http://docs.asp.net의 내용을 참고하여 번역한 것입니다.

Gulp 사용하기

원문 작성 : Erik Reitan, Scott Addie, Daniel Roth

일반적인 모던 웹 응용프로그램의 경우에는 빌드 수행과정이 다음과 같을 겁니다.

• JavacScript와 CSS 파일들을 합치고(번들, Bundle) 축소(minify)시킨다
• 매번 빌드 전에 도구를 사용하여 번들과 축소 작업들을 수행한다
• LESS나 SASS 파일을 CSS로 컴파일한다
• CoffeeScript와 TypeScript를 JavaScript로 컴파일한다

태스크 러너(task runner)는 이러한 일상적인 개발 작업 등을 자동화하는 도구입니다. Visual Studio는 2개의 유명한, JavaScript 기반의 태스크 러너를 기본적으로 탑재하고 있는데요. 그들은 Gulp와 Grunt입니다. 이번 컬럼은 그 중 Gulp를 소개합니다(Grunt는 다음 컬럼에서 다룰 예정입니다).

이번 컬럼에서 다루는 내용들:

• Gulp 소개
• Visual Studio의 Gulp 시작 태스크(Starter Tasks)
• 기본 태스크(Task) 실행하기
• 새로운 태스크를 정의하고 실행하기
• 일련의 태스크들을 정의하고 실행하기
• 인텔리센스
• 개발, 스테이징, 그리고 운영 환경
• 환경들 간의 전환
• 태스크와 모듈에 대해 더 자세히 알아보기
• Gulp 레시피
• 요약
• 이어서 추천하는 문서들

Gulp는 클라이언트 측 코드를 위한 JavaScript 기반의 스트리밍 빌드 도구입니다. 이는 일반적으로 빌드 환경에서 특정 이벤트가 발생하는 경우에 클라이언트 측 파일들이 일련의 프로세스를 거치게 하기 위해서 사용됩니다. Gulp를 사용하는 것의 이점은 공통적인 개발 작업들을 자동화하는 것 뿐만 아니라 반복적인 작업들을 간소화하여 전체적인 개발 시간을 단축한다는 것입니다. 예를 들면, Gulp는 번들과 축소(bundling and minification)를 자동화하기 위해서 혹은 새로운 빌드 전에 기존 개발 환경을 정리하기 위해서 사용될 수 있습니다.

Visual Studio는 여러분이 새로운 웹 응용프로그램을 설계 및 코딩하는 데 도움을 주기 위해서 [ASP.NET Core 웹 응용프로그램 프로젝트 템플릿]을 제공하고 있는데요. 일반적으로 이 템플릿은 ASP.NET의 다양한 모습들을 살펴볼 수 있게끔 기본적으로 다양한 기능들을 포함하고 있습니다. 현재는 추가적으로 Node 패키지 관리자(npm)와 Gulp도 포함하고 있어서, 프로젝트에 번들과 축소 기능을 추가하기 쉽게끔 지원하고 있습니다.

노트 : 번들이나 축소를 구현하기 위해서 반드시 Visual Studio나 [ASP.NET Core 웹 응용프로그램 프로젝트 템플릿]이 필요한 것은 아닙니다. 예를 들자면, Yeoman을 사용해서 ASP.NET 프로젝트를 만들 수도 있고, GitHub에 push한 다음, Mac에서 그 소스를 Clone 하여 해당 프로젝트를 번들 및 축소할 수도 있습니다.

[ASP.NET Core 웹 응용프로그램 프로젝트 템플릿]을 사용하여 새로운 웹 프로젝트를 만들면, Visual Studio가 Gulp.js npm 패키지인 gulpfile.js 파일과 Gulp 관련 파일들을 포함하고 있는 것을 볼 수 있을 겁니다. npm 패키지는 Visual Studio 프로젝트에서 Gulp 태스크를 실행하기 위해 필요한 모든 것들을 미리 확보해줍니다. 기본 제공되는 gulpfile.js 파일은 Visual Studio의 Task Runner 탐색기에서 실행될 수 있는 일련의 Gulp 태스크들을 정의하고 있습니다. package.json 파일의 devDependencies 섹션은 개발 시에 설치될 필요가 있는 관련된 종속 파일들을 지정합니다. 이러한 종속 파일들은 응용프로그램과 함께 배포하지는 않습니다. 새로운 패키지가 필요하다면 devDependencies에 추가하고 파일을 저장하면 됩니다.

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "rimraf": "2.2.8"
  }
}

새로운 키-값 쌍을 devDependencies에 추가하고 파일을 저장하면, Visual Studio가 알아서 패키지의 해당 버전을 다운로드하고 설치해 줍니다. 솔루션 탐색기에서 Dependencies > npm를 들여다보면 이러한 패키지들을 찾을 수 있습니다.

기본적인 Gulp 태스크들이 gulpfile.js에 일부 정의되어 있는데요. 이 태스크들은 CSS와 JavaScript 파일을 제거하고 축소하는 작업을 합니다. 다음의 JavaScript는 gulpfile.js의 앞 부분에 있는 Gulp 모듈을 보여주는데요. 이후에 이어지는 태스크들에서 참조될 파일 경로들을 지정하고 있습니다.

/// <binding Clean='clean' />
"use strict";
 
var gulp = require("gulp"),
  rimraf = require("rimraf"),
  concat = require("gulp-concat"),
  cssmin = require("gulp-cssmin"),
  uglify = require("gulp-uglify");
 
var paths = {
    webroot: "./wwwroot/"
};
 
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

코드 상단에서는 어떤 Node 모듈들이 필요한 지를 지정하고 있습니다. require 함수가 필요한 각각의 모듈들을 가져와 주기 때문에 종속된 태스크들이 그러한 기능들을 사용할 수 있습니다. 가져와진 각각의 모듈들은 변수에 할당되고 있습니다. 모듈들은 이름이나 경로를 사용해서 가져올 수 있는데요. 예제에서는 이름을 사용해서 gulp, rimraf, gulp-concat, gulp-cssmin, gulp-uglify 라는 모듈들을 가져오고 있습니다. 추가적으로, 일련의 경로들도 작성되어 있는데요. 이는 CSS와 JavaScript 파일의 위치를 태스크 안에서 재사용하고 참조할 수 있도록 해당 경로를 설정해 두는 것입니다. 다음의 표는 gulpfile.js에 포함되어 있는 모듈들의 설명입니다.

필수 모듈들을 gulpfile.js로 가져온 뒤에는 태스크들을 정의해야 합니다. Visual Studio는 다음과 같이 6개의 태스크들을 미리 등록해 두고 있습니다.

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});
 
gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});
 
gulp.task("clean", ["clean:js", "clean:css"]);
 
gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
      .pipe(concat(paths.concatJsDest))
      .pipe(uglify())
      .pipe(gulp.dest("."));
});
 
gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
      .pipe(concat(paths.concatCssDest))
      .pipe(cssmin())
      .pipe(gulp.dest("."));
});
 
gulp.task("min", ["min:js", "min:css"]);

다음 표는 상기 코드에서 지정된 태스크들에 대한 설명입니다.

아직 새로운 웹 앱을 생성하지 않았다면, 새로운 ASP.NET Web 응용프로그램 프로젝트를 Visual Studio에서 만들도록 합니다.

1. 메뉴에서 파일 > 새로 만들기 > 프로젝트를 선택하면, [새 프로젝트] 창이 나타납니다.

2. ASP.NET 웹 응용프로그램 템플릿을 선택하고, 프로젝트 이름을 입력한 다음, 확인(OK)를 클릭합니다.
3. 새 ASP.NET 프로젝트 창에서, ASP.NET Core 웹 응용프로그램 템플릿을 선택하고 확인(OK)를 클릭합니다.
4. 솔루션 탐색기에서 gulpfile.js에 마우스 오른쪽 클릭하고 Task Runner 탐색기를 선택합니다.

Task Runner 탐색기는 Gulp 태스크들의 목록을 보여줍니다. 기본적인 ASP.NET Core 웹 응용프로그램 템플릿에서는 6개의 태스크가 gulpfile.js 안에 들어있습니다.

5. Task Runner 탐색기 내 Tasks 밑에 있는 clean에 마우스 오른쪽 클릭을 하고, 팝업 메뉴에서 실행(Run)을 선택합니다.

Task Runner 탐색기는 clean이라는 새로운 탭을 만들고 clean 태스크를 gulpfile.js 파일에서 정의된 대로 실행합니다.

6. 다음으로, clean 태스크를 마우스 오른쪽 클릭한 뒤, Bindings > Before Build를 선택합니다.

Before Build 바인딩 옵션은 clean 태스크가 프로젝트 빌드에 앞서 매번 자동 실행되도록 합니다.

Task Runner 탐색기에 여러분이 설정한 바인딩은 project.json에 저장되지 않는다는 사실에 주목할 필요가 있습니다. 그 대신, 바인딩 설정 정보는 project.json의 상단에 주석 형태로 저장됩니다. 물론, project.json의 scripts 섹션에서 gulp 태스크를 시작하게 하는 것도 가능합니다. Task Runner 탐색기는 Visual Studio를 사용할 경우에 태스크를 실행하도록 구성할 수 있는 도구입니다. 만일 여러분이 Visual Studio가 아닌 다른 편집기를 사용하고 있다면(예, Visual Studio Code 등) project.json의 Scripts 섹션을 직접 편집하여 사용하는 것이 아마도 다양한 스테이지(prebuild, build 등)에서 태스크를 실행하게 할 수 있는 가장 직관적인 방법일 것입니다.

노트
project.json의 스테이지(stage)들은 기본적으로 Visual Studio로 개발하고 있는 경우에는 발생하지 않습니다. 만일, 그들이 동작하게 하고 싶다면 Visual Studio의 프로젝트 속성에서 [빌드] 탭에 있는 [Produce outputs on build]를 체크하면 됩니다. 이렇게 하면 여러분의 .xproj 파일에 ProduceOutputsOnBuild 요소가 추가되고, 빌드 시에 Visual studio가 project.json의 스테이지들에 대한 이벤트를 발생시킬 겁니다.

새로운 Gulp 태스크를 정의하려면 gulpfile.js를 수정합니다.

1. 다음의 자바스크립트를 gulpfile.js의 끝부분에 추가합니다.

gulp.task("first", function () {
    console.log('first task! <-----');
});

이 태스크는 first라고 명명되어 있으며, 단순히 문자열을 출력합니다.

2. gulpfile.js를 저장합니다.
3. 솔루션 탐색기에서 gulpfile.js 파일에 마우스 오른쪽 클릭하고 Task Runner 탐색기를 선택합니다
4. Task Runner 탐색기에서 first에 마우스 오른쪽 클릭하고 Run을 선택합니다.

출력 텍스트가 나타나는 것을 볼 수 있을 겁니다. 만일 일반적인 시나리오에서 사용되는 예제들이 보고 싶다면 Gulp Recipes를 살펴보시길 바래요.

여러 개의 태스크들을 실행하게 되면 기본적으로 태스크들은 동시에 실행됩니다. 하지만, 특정 순서에 따라서 태스크들을 실행해야 할 필요가 있다면, 특정 태스크가 완료된 다음 수행될 태스크가 무엇인 지를 지정해 주어야 합니다.

1. 일련의 태스크들이 순서대로 실행하도록 정의하려면, 앞서 gulpfile.js에서 추가했던 first를 다음과 같이 변경해야 합니다.

gulp.task("series:first", function () {
    console.log('first task! <-----');
});
 
gulp.task("series:second", ["series:first"], function () {
    console.log('second task! <-----');
});
 
gulp.task("series", ["series:first", "series:second"], function () { });

이제 여러분은 3개의 태스크를 갖게 되었을 겁니다. 즉, series:first, series:second, 그리고 series를 말이죠. 그 중 series:second 태스크는 2번째 매개변수를 갖고 있는데, 이 변수에는 자신이 실행되기에 앞서 실행 및 완료되어야 하는 태스크의 배열을 설정하고 있습니다. 그렇기에, 상기 코드에서 지정한 것처럼, series:first 태스크는 series:second 태스크가 실행되기 전에 확실하게 완료될 것입니다.

2. gulpfile.js를 저장합니다.
3. 솔루션 탐색기에서 gulpfile.js 파일에 마우스 오른쪽 클릭하고 Task Runner 탐색기를 선택합니다(아직 열려있지 않다면 말이죠).
4. Task Runner 탐색기에서 series에 마우스 오른쪽 클릭을 하고 실행(Run)을 선택합니다.

인텔리센스(IntelliSense)는 코드 완성, 매개변수 설명을 제공해 주는 것에 더하여 생산성을 높이고 에러를 줄일 수 있게 해 주는 다양한 기능들도 제공합니다. Gulp 태스크들 또한 JavaScript로 작성되기 때문에 개발 중에 IntelliSense의 도움을 받을 수가 있습니다. JavaScript를 작성하는 동안에 IntelliSense는 현재의 컨텍스트에서 가용한 개체, 함수, 속성 및 매개변수들을 나열합니다. 코드를 완성하려면 IntelliSense가 제공하는 팝업 목록에서 코딩 옵션을 선택하면 됩니다.

IntelliSense에 대한 더 많은 정보는 JavaScript IntelliSense를 참고하세요

스테이징, 운영 환경을 위해서 Gulp가 클라이언트 측 파일들을 최적화하기 위해서 사용될 경우, 처리된 파일들은 로컬 스테이징 및 운영 위치에 저장됩니다. _Layout.cshtml 파일은 2개의 서로 다른 버전의 CSS 파일을 제공하기 위해서 environment 태그 도우미를 사용하는데요. 두 버전의 CSS 파일 중 하나는 개발 환경을 위한 것이고 다른 하나는 스테이징과 운영 환경을 위해 최적화된 것입니다. Visual Studio 2015에서는 여러분이 ASPNETCORE_ENVIRONMENT 환경 변수를 Production로 변경할 경우, 자동으로 웹앱을 빌드하면서 최소화된 CSS 파일들을 연결해 줄 것입니다. 다음의 마크업은 Development 용 CSS 파일에 대한 링크 태그와 Staging, Production 용 CSS 파일에 대한 링크 태그를 갖는 environment 태그 도우미를 보여주고 있습니다.

<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
          asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

다른 환경으로 컴파일하도록 전환하려면 ASPNETCORE_ENVIRONMENT 환경 변수의 값을 바꾸면 됩니다.

1. Task Runner 탐색기에서 min 태스크가 Before Build에 실행되도록 설정되어 있는지 확인합니다.
2. 솔루션 탐색기에서 프로젝트 명에 마우스 오른쪽 클릭하고 [속성]을 선택합니다.

웹 앱에 대한 속성 화면이 출력됩니다.

3. [디버그(Debug)] 탭을 클릭합니다.
4. ASPNETCORE_ENVIRONMENT 환경 변수의 값을 Production으로 설정합니다.
5. F5를 눌러서 브라우저에서 응용프로그램을 실행합니다.
6. 브라우저 창에서 페이지에 마우스 오른쪽 클릭을 하고 [소스 보기]를 선택해서 HTML을 살펴봅니다.

stylesheet 링크가 최소화된 CSS 파일을 가리키는 지 확인합니다.

7. 브라우저를 닫아서 웹앱을 중지합니다.
8. Visual Studio에서 웹앱의 [속성] 화면으로 돌아와서 ASPNETCORE_ENVIRONMENT 환경변수의 값을 Development로 변경합니다.
9. F5를 눌러서 브라우저에서 응용프로그램을 실행합니다.
10. 브라우저 창에서 페이지에 마우스 오른쪽 클릭을 하고 [소스 보기]를 선택해서 HTML을 살펴봅니다.

stylesheet 링크가 최소화 되지 않은 버전의 CSS 파일을 가리키는 지 확인합니다

ASP.NET Core에서 환경과 관련된 더 많은 정보가 궁금하다면 Working with Multiple Environments를 참고하세요.

Gulp 태스크는 함수 이름을 사용해서 등록됩니다. 만일 현재의 태스크 이전에 다른 태스크를 먼저 실행해야만 한다면 종속성을 지정하면 됩니다. Gulp가 제공하는 다양한 함수들을 사용하면 Gulp 태스크를 실행하고 감시할 수 있을 뿐만 아니라 변경된 파일의 원본(src)와 대상(dest)도 설정할 수 있습니다. 다음은 주요한 Gulp API 함수들의 목록입니다.

추가적인 Gilp API 참고 정보는 Gulp Docs API를 참고하세요.

Gulp 커뮤니티는 Gulp 레시피도 제공하고 있습니다. 이러한 레시피들은 일반적인 시나리오에 알맞는 Gulp 태스크들로 구성되어 있습니다.

Gulp는 Javascript 기반의 스트리밍 빌드 도구이며 번들링과 축소화를 위해서 사용될 수 있습니다. Visual Studio는 자동으로 Gulp를 설치하고 Gulp 플러그인들도 설치해 줍니다. Gulp는 GitHub에서 관리되고 있습니다. Gulp에 대한 추가적인 정보는 GitHub에 있는 Gulp Documentation를 참고해 보시기 바랍니다.