ASP.NET Core에서 정적 자산 번들링 및 축소하기Bundle and minify static assets in ASP.NET Core

작성자: Scott AddieDavid PineBy Scott Addie and David Pine

이 문서에서는 ASP.NET Core 웹 응용 프로그램에서 번들링 및 축소를 사용하는 방법을 비롯해서 이러한 기능을 적용하여 얻을 수 있는 이점을 설명합니다.This article explains the benefits of applying bundling and minification, including how these features can be used with ASP.NET Core web apps.

번들링 및 축소란 무엇입니까?What is bundling and minification

번들링 및 축소는 웹 앱에 적용할 수 있는 두 가지 고유한 성능 최적화입니다.Bundling and minification are two distinct performance optimizations you can apply in a web app. 번들링 및 축소를 함께 사용하면 서버 요청 수를 줄이고 요청된 정적 자산의 크기를 줄여서 성능을 향상시킬 수 있습니다.Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets.

번들링 및 축소는 주로 첫 번째 페이지의 요청 로드 시간을 개선합니다.Bundling and minification primarily improve the first page request load time. 브라우저는 웹 페이지가 요청되면 정적 자산(JavaScript, CSS 및 이미지)을 캐시합니다.Once a web page has been requested, the browser caches the static assets (JavaScript, CSS, and images). 따라서 동일한 자산을 요구하는 동일한 사이트에서 동일한 페이지(들)을 요청하는 경우에는 번들링 및 축소로 성능을 개선하지 못합니다.Consequently, bundling and minification don't improve performance when requesting the same page, or pages, on the same site requesting the same assets. 자산에 대한 만료 헤더가 올바르게 설정되지 않고 번들링 및 축소를 사용하지 않는 경우에는 브라우저의 새로 고침 추론이 며칠 지난 후에 자산이 오래된 것으로 간주합니다.If the expires header isn't set correctly on the assets and if bundling and minification isn't used, the browser's freshness heuristics mark the assets stale after a few days. 게다가 브라우저는 각 자산에 대한 유효성 검사 요청을 필요로 합니다.Additionally, the browser requires a validation request for each asset. 이 경우 번들링 및 축소는 첫 번째 페이지 요청 이후라도 성능 개선을 제공합니다.In this case, bundling and minification provide a performance improvement even after the first page request.

번들링Bundling

번들링은 여러 개의 파일을 단일 파일로 결합합니다.Bundling combines multiple files into a single file. 번들링은 웹 페이지 같은 웹 자산을 렌더링하는데 필요한 서버 요청의 수를 줄입니다.Bundling reduces the number of server requests that are necessary to render a web asset, such as a web page. CSS, JavaScript 등에 대한 여러 개의 개별 번들을 만들 수 있습니다. 파일 수가 적다는 말은 브라우저에서 서버로 보내는 HTTP 요청 수 또는 응용 프로그램을 제공하는 서비스의 HTTP 요청 수가 줄어든다는 뜻입니다.You can create any number of individual bundles specifically for CSS, JavaScript, etc. Fewer files means fewer HTTP requests from the browser to the server or from the service providing your application. 따라서 첫 번째 페이지 로드 성능이 향상됩니다.This results in improved first page load performance.

축소Minification

축소는 기능 변경 없이 코드에서 불필요한 문자를 제거합니다.Minification removes unnecessary characters from code without altering functionality. 결과적으로 요청된 자산(CSS, 이미지 및 JavaScript 파일 같은)의 크기가 크게 감소합니다.The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files). 일반적인 축소의 부수적인 작용은 변수 이름을 한 문자로 줄이고 주석과 불필요한 공백을 제거하는 것입니다.Common side effects of minification include shortening variable names to one character and removing comments and unnecessary whitespace.

다음 JavaScript 함수를 살펴보시기 바랍니다.Consider the following JavaScript function:

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

축소는 이 함수를 다음과 같이 줄입니다.Minification reduces the function to the following:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

주석과 불필요한 공백을 제거하는 것 외에도 다음 매개 변수 및 변수 이름이 다음과 같이 변경되었습니다.In addition to removing the comments and unnecessary whitespace, the following parameter and variable names were renamed as follows:

원래 이름Original 변경된 이름Renamed
imageTagAndImageID t
imageContext a
imageElement r

번들링 및 축소의 영향Impact of bundling and minification

다음 표는 자산을 개별적으로 로드하는 경우와 번들링 및 축소를 사용하는 경우의 차이를 간략히 보여줍니다.The following table outlines differences between individually loading assets and using bundling and minification:

작업Action B/M을 사용 하 여With B/M B/M 없이Without B/M 변화Change
파일 요청File Requests 77 1818 157%157%
전송(kb)KB Transferred 156156 264.68264.68 70%70%
로드 시간 (ms)Load Time (ms) 885885 23602360 167%167%

브라우저는 HTTP 요청 헤더에 관해 매우 장황합니다.Browsers are fairly verbose with regard to HTTP request headers. 번들링 시 전송되는 총 바이트가 상당히 감소하는 것을 볼 수 있습니다.The total bytes sent metric saw a significant reduction when bundling. 로드 시간이 크게 개선되었지만 이 예제는 로컬에서 실행된 것입니다.The load time shows a significant improvement, however this example ran locally. 네트워크를 통해서 전송되는 자산에 대해 번들링 및 축소를 사용하면 큰 성능 향상을 얻을 수 있습니다.Greater performance gains are realized when using bundling and minification with assets transferred over a network.

번들링 및 축소 전략 선택하기Choose a bundling and minification strategy

MVC 및 Razor 페이지 프로젝트 템플릿을 묶음 및 축소 JSON 구성 파일의 구성에 대 한 기본 제공 솔루션을 제공 합니다.The MVC and Razor Pages project templates provide an out-of-the-box solution for bundling and minification consisting of a JSON configuration file. 와 같은 타사 도구를 Grunt runner 작업을 좀 더 많은 복잡성을 사용 하 여 동일한 작업을 수행 합니다.Third-party tools, such as the Grunt task runner, accomplish the same tasks with a bit more complexity. 개발 워크플로에서 처리 묶음 및 축소 초과 해야 하는 경우 타사 도구는 최적의 선택—lint 및 이미지 최적화와 같은 합니다.A third-party tool is a great fit when your development workflow requires processing beyond bundling and minification—such as linting and image optimization. 디자인 타임 묶음 및 축소를 사용 하 여 앱의 배포 하기 전에 축소 된 파일이 생성 됩니다.By using design-time bundling and minification, the minified files are created prior to the app's deployment. 묶음 및 축소를 배포 하기 전에 서버 부하 감소의 이점이 제공 합니다.Bundling and minifying before deployment provides the advantage of reduced server load. 그러나 해당 디자인 타임 묶음을 인식 해야 하 고 축소 빌드 복잡성 증가 정적 파일 에서만 작동 합니다.However, it's important to recognize that design-time bundling and minification increases build complexity and only works with static files.

번들링 및 축소 구성하기Configure bundling and minification

ASP.NET Core 2.0 이전에서는 MVC 및 Razor 페이지 프로젝트 템플릿에서 각 번들에 대한 옵션을 정의하는 bundleconfig.json 구성 파일을 제공합니다.In ASP.NET Core 2.0 or earlier, the MVC and Razor Pages project templates provide a bundleconfig.json configuration file that defines the options for each bundle:

ASP.NET Core 2.1 이상에서는 MVC 또는 Razor 페이지 프로젝트 루트에 bundleconfig.json이라는 새로운 JSON 파일을 추가합니다.In ASP.NET Core 2.1 or later, add a new JSON file, named bundleconfig.json, to the MVC or Razor Pages project root. 다음 JSON을 이 파일의 시작점으로 포함시킵니다.Include the following JSON in that file as a starting point:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

bundleconfig.json 파일은 각 번들에 대한 옵션을 정의합니다.The bundleconfig.json file defines the options for each bundle. 위의 예제에서는 사용자 지정 JavaScript(wwwroot/js/site.js) 및 스타일시트(wwwroot/css/site.css) 파일들에 대해 단일 번들 구성이 정의됩니다.In the preceding example, a single bundle configuration is defined for the custom JavaScript (wwwroot/js/site.js) and stylesheet (wwwroot/css/site.css) files.

구성 옵션은 다음과 같습니다.Configuration options include:

  • outputFileName: 출력 번들 파일의 이름입니다.outputFileName: The name of the bundle file to output. bundleconfig.json 파일로부터의 상대 경로를 포함할 수 있습니다.Can contain a relative path from the bundleconfig.json file. 필수required
  • inputFiles: 배열 함께 번들로 제공할 파일입니다.inputFiles: An array of files to bundle together. 이 배열의 값은 구성 파일에 대한 상대 경로입니다.These are relative paths to the configuration file. 선택적, *값이 비어 있으면 빈 출력 파일이 만들어집니다.optional, *an empty value results in an empty output file. 와일드카드 사용 패턴이 지원됩니다.globbing patterns are supported.
  • minify: 출력 형식에 대 한 축소 옵션입니다.minify: The minification options for the output type. 선택적, 기본값 - minify: { enabled: true }optional, default - minify: { enabled: true }
  • includeInProject: 프로젝트 파일에 생성 된 파일을 추가할지 여부를 나타내는 플래그입니다.includeInProject: Flag indicating whether to add generated files to project file. 선택적, 기본값 - falseoptional, default - false
  • sourceMap: 해당 번들된 파일에 대 한 소스 맵을 생성할지 여부를 나타내는 플래그입니다.sourceMap: Flag indicating whether to generate a source map for the bundled file. 선택적, 기본값 - falseoptional, default - false
  • sourceMapRootPath: 생성 된 소스 맵 파일을 저장 하는 것에 대 한 루트 경로입니다.sourceMapRootPath: The root path for storing the generated source map file.

빌드 시 번들링 및 축소 실행하기Build-time execution of bundling and minification

BuildBundlerMinifier NuGet 패키지를 사용하면 빌드 시 번들링 및 축소를 수행할 수 있습니다.The BuildBundlerMinifier NuGet package enables the execution of bundling and minification at build time. 이 패키지는 빌드 및 정리 시에 실행되는 MSBuild 대상을 주입합니다.The package injects MSBuild Targets which run at build and clean time. 빌드 프로세스는 bundleconfig.json 파일을 분석하여 정의된 구성을 기반으로 출력 파일을 생성합니다.The bundleconfig.json file is analyzed by the build process to produce the output files based on the defined configuration.

참고

BuildBundlerMinifier는 Microsoft 지원 되지 않습니다 제공 하는 GitHub의 커뮤니티 기반 프로젝트에 속합니다.BuildBundlerMinifier belongs to a community-driven project on GitHub for which Microsoft provides no support. 문제점은 여기에 제출해야 합니다.Issues should be filed here.

프로젝트에 BuildBundlerMinifier 패키지를 추가합니다.Add the BuildBundlerMinifier package to your project.

프로젝트를 빌드합니다.Build the project. 출력 창에 다음 내용이 나타납니다.The following appears in the Output window:

1>------ Build started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>
1>Bundler: Begin processing bundleconfig.json
1>  Minified wwwroot/css/site.min.css
1>  Minified wwwroot/js/site.min.js
1>Bundler: Done processing bundleconfig.json
1>BuildBundlerMinifierApp -> C:\BuildBundlerMinifierApp\bin\Debug\netcoreapp2.0\BuildBundlerMinifierApp.dll
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

프로젝트를 정리합니다.Clean the project. 출력 창에 다음 내용이 나타납니다.The following appears in the Output window:

1>------ Clean started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>
1>Bundler: Cleaning output from bundleconfig.json
1>Bundler: Done cleaning output file from bundleconfig.json
========== Clean: 1 succeeded, 0 failed, 0 skipped ==========

번들링 및 축소의 애드혹 실행Ad hoc execution of bundling and minification

프로젝트를 빌드하지 않고도 필요할 때마다 번들링 및 축소 작업을 실행할 수 있습니다.It's possible to run the bundling and minification tasks on an ad hoc basis, without building the project. BundlerMinifier.Core NuGet 패키지를 프로젝트에 추가합니다.Add the BundlerMinifier.Core NuGet package to your project:

<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" />

참고

BundlerMinifier.Core는 Microsoft에서 지원을 제공하지 않는 GitHub의 커뮤니티 주도 프로젝트에 속해 있습니다.BundlerMinifier.Core belongs to a community-driven project on GitHub for which Microsoft provides no support. 문제점은 여기에 제출해야 합니다.Issues should be filed here.

이 패키지는 .NET Core CLI가 dotnet-bundle 도구를 포함하도록 확장합니다.This package extends the .NET Core CLI to include the dotnet-bundle tool. 다음 명령을 패키지 관리자 콘솔(PMC) 창 또는 명령 셸에서 실행할 수 있습니다.The following command can be executed in the Package Manager Console (PMC) window or in a command shell:

dotnet bundle

중요

NuGet 패키지 관리자는 *.csproj 파일에 <PackageReference /> 노드로 종속성을 추가합니다.NuGet Package Manager adds dependencies to the *.csproj file as <PackageReference /> nodes. dotnet bundle 명령은 <DotNetCliToolReference /> 노드가 사용되는 경우에만 .NET Core CLI에 등록됩니다.The dotnet bundle command is registered with the .NET Core CLI only when a <DotNetCliToolReference /> node is used. 그에 맞춰 *.Csproj 파일을 수정해야 합니다.Modify the *.csproj file accordingly.

워크플로에 파일 추가하기Add files to workflow

다음과 비슷한 또 다른 custom.css 파일이 추가되는 예제를 가정해 봅니다.Consider an example in which an additional custom.css file is added resembling the following:

.about, [role=main], [role=complementary] {
    margin-top: 60px;
}

footer {
    margin-top: 10px;
}

custom.css를 축소하고 이를 site.css와 함께 site.min.css 파일에 번들하려면 다음과 같이 상대 경로를 bundleconfig.json에 추가합니다.To minify custom.css and bundle it with site.css into a site.min.css file, add the relative path to bundleconfig.json:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/custom.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

참고

또는 다음과 같은 와일드 카드 사용 패턴을 사용할 수도 있습니다.Alternatively, the following globbing pattern could be used:

"inputFiles": ["wwwroot/**/*(*.css|!(*.min.css))"]

이 와일드 카드 사용 패턴은 축소된 파일 패턴을 제외한 모든 CSS 파일을 매칭합니다.This globbing pattern matches all CSS files and excludes the minified file pattern.

애플리케이션을 빌드합니다.Build the application. site.min.css를 열고 custom.css의 내용이 파일 끝에 추가되었음을 확인합니다.Open site.min.css and notice the content of custom.css is appended to the end of the file.

환경 기반 번들링 및 축소Environment-based bundling and minification

프로덕션 환경에서는 번들링되고 축소된 앱의 파일을 사용하는 것이 가장 좋습니다.As a best practice, the bundled and minified files of your app should be used in a production environment. 개발하는 중에는 원본 파일을 사용해야 앱을 손쉽게 디버깅할 수 있습니다.During development, the original files make for easier debugging of the app.

뷰에서 Environment 태그 도우미를 사용하여 페이지에 포함할 파일을 지정합니다.Specify which files to include in your pages by using the Environment Tag Helper in your views. Environment 태그 도우미는 특정 환경에서 실행될 때만 자신의 내용을 렌더링합니다.The Environment Tag Helper only renders its contents when running in specific environments.

다음 environment 태그는 Development 환경에서 실행하는 경우에만 처리되지 않은 CSS 파일을 렌더링합니다.The following environment tag renders the unprocessed CSS files when running in the Development environment:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

다음 environment 태그는 Development가 아닌 환경에서 실행할 때 번들링되고 축소된 CSS 파일을 렌더링합니다.The following environment tag renders the bundled and minified CSS files when running in an environment other than Development. 예를 들어 Production이나 Staging에서 실행하면 다음 스타일시트의 렌더링이 트리거됩니다.For example, running in Production or Staging triggers the rendering of these stylesheets:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>

Gulp에서 bundleconfig.json 사용하기Consume bundleconfig.json from Gulp

앱의 번들링 및 축소 워크플로에서 추가적인 처리를 필요로 하는 경우가 있습니다.There are cases in which an app's bundling and minification workflow requires additional processing. 그 예로 이미지 최적화, 캐시 무효화 및 CDN 자산 처리를 들 수 있습니다.Examples include image optimization, cache busting, and CDN asset processing. 이러한 요구 사항을 충족하려면 Gulp를 사용하도록 번들링 및 축소 워크플로를 변환할 수 있습니다.To satisfy these requirements, you can convert the bundling and minification workflow to use Gulp.

Bundler & Minifier 확장 사용Use the Bundler & Minifier extension

Visual Studio Bundler & Minifier 확장 처리 Gulp로 변환 합니다.The Visual Studio Bundler & Minifier extension handles the conversion to Gulp.

참고

Bundler & Minifier 확장 Microsoft 지원 되지 않습니다 제공 하는 GitHub의 커뮤니티 기반 프로젝트에 속합니다.The Bundler & Minifier extension belongs to a community-driven project on GitHub for which Microsoft provides no support. 문제점은 여기에 제출해야 합니다.Issues should be filed here.

솔루션 탐색기에서 bundleconfig.json 파일을 마우스 오른쪽 버튼으로 클릭하고 Bundler & Minifier > Convert To Gulp... 를 선택합니다.Right-click the bundleconfig.json file in Solution Explorer and select Bundler & Minifier > Convert To Gulp...:

Convert To Gulp 컨텍스트 메뉴

그러면 프로젝트에 gulpfile.jspackage.json 파일이 추가됩니다.The gulpfile.js and package.json files are added to the project. 그리고 package.json 파일의 devDependencies 섹션에 나열된 지원 npm 패키지들이 설치됩니다.The supporting npm packages listed in the package.json file's devDependencies section are installed.

PMC 창에서 다음 명령을 실행하여 Gulp CLI를 전역 종속성으로 설치합니다.Run the following command in the PMC window to install the Gulp CLI as a global dependency:

npm i -g gulp-cli

입력, 출력 및 설정을 위해 gulpfile.js 파일에서 bundleconfig.json 파일을 읽습니다.The gulpfile.js file reads the bundleconfig.json file for the inputs, outputs, and settings.

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');

// Code omitted for brevity

직접 변환하기Convert manually

Visual Studio나 Bundler & Minifier 확장을 사용할 수 없는 경우 직접 수작업으로 변환합니다.If Visual Studio and/or the Bundler & Minifier extension aren't available, convert manually.

프로젝트 루트에 다음 devDependencies가 지정된 package.json 파일을 추가합니다.Add a package.json file, with the following devDependencies, to the project root:

"devDependencies": {
  "del": "^3.0.0",
  "gulp": "^4.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-cssmin": "^0.2.0",
  "gulp-htmlmin": "^3.0.0",
  "gulp-uglify": "^3.0.0",
  "merge-stream": "^1.0.1"
}

package.json과 동일한 수준에서 다음 명령을 실행하여 종속성을 설치합니다.Install the dependencies by running the following command at the same level as package.json:

npm i

전역 종속성으로 Gulp CLI를 설치 합니다.Install the Gulp CLI as a global dependency:

npm i -g gulp-cli

gulpfile.js 파일을 프로젝트 루트 아래에 복사합니다.Copy the gulpfile.js file below to the project root:

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');

const regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task('min:js', async function () {
    merge(getBundles(regex.js).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:css', async function () {
    merge(getBundles(regex.css).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:html', async function () {
    merge(getBundles(regex.html).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min', gulp.series(['min:js', 'min:css', 'min:html']));

gulp.task('clean', () => {
    return del(bundleconfig.map(bundle => bundle.outputFileName));
});

gulp.task('watch', () => {
    getBundles(regex.js).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:js"])));

    getBundles(regex.css).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:css"])));

    getBundles(regex.html).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(['min:html'])));
});

const getBundles = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.outputFileName);
    });
};

gulp.task('default', gulp.series("min"));

Gulp 작업 실행하기Run Gulp tasks

Visual Studio에서 프로젝트를 빌드하기 전에 Gulp 축소 작업을 트리거하려면 *.csproj 파일에 다음 MSBuild 대상을 추가합니다.To trigger the Gulp minification task before the project builds in Visual Studio, add the following MSBuild Target to the *.csproj file:

<Target Name="MyPreCompileTarget" BeforeTargets="Build">
  <Exec Command="gulp min" />
</Target>

이 예제에서 MyPreCompileTarget 대상 내에 정의된 모든 작업은 사전 정의된 Build 대상보다 먼저 실행됩니다.In this example, any tasks defined within the MyPreCompileTarget target run before the predefined Build target. Visual Studio의 출력 창에 다음과 비슷한 출력이 나타납니다.Output similar to the following appears in Visual Studio's Output window:

1>------ Build started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>BuildBundlerMinifierApp -> C:\BuildBundlerMinifierApp\bin\Debug\netcoreapp2.0\BuildBundlerMinifierApp.dll
1>[14:17:49] Using gulpfile C:\BuildBundlerMinifierApp\gulpfile.js
1>[14:17:49] Starting 'min:js'...
1>[14:17:49] Starting 'min:css'...
1>[14:17:49] Starting 'min:html'...
1>[14:17:49] Finished 'min:js' after 83 ms
1>[14:17:49] Finished 'min:css' after 88 ms
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

추가 자료Additional resources