asp.net-core => 번들링 및 미세화

그르unt과 걸프

ASP.NET 핵심 응용 프로그램에서는 Gulp 및 Grunt 와 같은 타사 도구를 사용하여 디자인 타임에 클라이언트 측 리소스를 번들 및 축소합니다. 디자인 타임 번들링 및 축소를 사용하면 응용 프로그램을 배포하기 전에 축소 된 파일이 만들어집니다. 배포 전에 번들 및 축소를 수행하면 서버로드가 줄어 듭니다. 그러나 디자인 타임 번들링 및 축소로 빌드 복잡성이 증가하고 정적 파일에서만 작동한다는 점을 인식하는 것이 중요합니다.

이 작업은 프로젝트 내의 gulpfile.js 파일을 통해 Gulp를 구성하여 ASP.NET 코어에서 수행됩니다.

// Defining dependencies
var gulp = require("gulp"),  
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

// Define web root
var webroot = "./wwwroot/"

// Defining paths
var paths = {  
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

// Bundling (via concat()) and minifying (via uglify()) Javascript
gulp.task("min:js", function () {  
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

// Bundling (via concat()) and minifying (via cssmin()) Javascript
gulp.task("min:css", function () {  
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

이 접근 방식은 기존 Javascript 및 CSS 파일을 사용되는 디렉토리 및 globbing 패턴에 따라 적절히 묶어서 크기를 줄입니다.

번들 및 확장기 확장

또한 Visual Studio에는이 프로세스를 처리 할 수있는 Bundler 및 Minifier Extension 이 있습니다. 확장 기능을 사용하면 코드를 작성하지 않고도 필요한 파일을 쉽게 선택하고 번들로 제공 할 수 있습니다.

번들 빌드

확장을 설치 한 후에 는 번들 내에 포함하려는 모든 특정 파일을 선택하고 확장에서 파일 묶기 및 파일 축소 옵션을 사용합니다.

번들의 이름을 지정하고 저장할 위치를 선택하라는 메시지가 나타납니다. 다음과 같이 프로젝트 내의 bundleconfig.json 이라는 새로운 파일을 bundleconfig.json 될 것입니다 :

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ]
  }
]

참고 : 파일이 선택된 순서에 따라 번들 내에서 나타나는 순서가 결정되므로 종속성이있는 경우이를 고려해야합니다.

번들 축소

이제 이전 단계에서는 파일을 번들링하고 번들을 축소하려면 bundleconfig.json 파일에 해당 파일을 표시해야합니다. 기존 번들에 다음과 같은 minify 블록을 추가하여 축소하고자 함을 나타 내기 만하면됩니다.

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ],
    "minify": {
      "enabled": true
    }
  }
]

번들 자동화

마지막으로,이 프로세스를 자동화하려면 응용 프로그램 내에서 변경 사항이 번들에 반영되도록 응용 프로그램이 빌드 될 때마다 실행되도록 작업을 예약 할 수 있습니다.

이렇게하려면 다음을 수행해야합니다.

도구> 작업 실행기 탐색기를 통해 작업 실행기 탐색기를 엽니 다 .
bundleconfig.json 아래의 모든 파일 갱신 옵션을 마우스 오른쪽 단추로 누르 bundleconfig.json .
바인딩 컨텍스트 메뉴에서 원하는 바인딩 을 선택하십시오 .

이 작업을 수행 한 후에는 선택한 기본 설정 단계에서 번들이 자동으로 업데이트되어야합니다.

dotnet bundle 명령

ASP.NET Core RTM 릴리스에는 기존의 ASP.NET 핵심 응용 프로그램에 쉽게 통합 할 수있는 BundlerMinifier.Core 및 BundlerMinifier.Core 도구 인 BundlerMinifier.Core 도입 BundlerMinifier.Core 외부 확장이나 스크립트 파일이 필요하지 않습니다.

BundlerMinifier.Core 사용

이 도구를 사용하려면 아래 그림과 같이 기존 project.json 파일의 tools 섹션에 BundlerMinifier.Core 에 대한 참조를 추가하십시오 .

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

번들 구성

도구를 추가 한 bundleconfig.json 는 번들 내에 포함하려는 파일을 구성하는 데 사용할 bundleconfig.json 파일을 프로젝트에 추가 해야합니다. 최소 구성은 다음과 같습니다.

[
  {
    "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
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

번들 생성 / 업데이트

번들을 구성한 후에는 다음 명령을 사용하여 기존 파일을 번들 및 축소 할 수 있습니다.

dotnet bundle

자동 번들링

Bundling 및 Minification 프로세스는 기존 project.json 파일의 프리 컴파일 섹션에 dotnet bundle 명령을 추가하여 빌드 프로세스의 일부로 자동화 할 수 있습니다.

"scripts": {
  "precompile": [
    "dotnet bundle"
  ]
}

사용 가능한 명령

아래에서 사용 가능한 모든 명령과 그 설명 목록을 볼 수 있습니다.

dotnet 번들 - bundleconfig.json 파일을 사용하여 bundle 명령을 실행하여 지정된 파일을 번들 및 bundleconfig.json 합니다.
dotnet bundle clean - 디스크에서 기존의 모든 출력 파일을 지 웁니다.
dotnet bundle watch - bundleconfig.json 구성의 기존 입력 파일이 파일을 dotnet bundle 때마다 bundleconfig.json dotnet bundle 을 자동으로 실행하는 watcher를 만듭니다.
dotnet bundle help - 사용 가능한 모든 도움말 옵션과 명령 줄 인터페이스 사용 지침을 표시합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

asp.net-core
번들링 및 미세화

수색…