asp.net-core => 束縛と小型化

グランツとギャルプ

ASP.NETコアアプリケーションでは、次のようなサードパーティ製ツール、使用して設計時中にクライアント側のリソースをバンドルし、縮小化がぶ飲みしてうなり声を。設計時のバンドルと縮小を使用することにより、アプリケーションの展開前に縮小されたファイルが作成されます。デプロイメント前にバンドルして小型化することで、サーバーの負荷が軽減されるという利点があります。ただし、デザイン時のバンドルと縮小によってビルドの複雑さが増し、静的ファイルでのみ機能することを認識することが重要です。

これは、ASP.NETコアで、プロジェクト内のgulpfile.jsファイルを使用してgulpfile.js設定することによって行われます。

// 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下にある[すべてのファイルを更新]オプションを右クリックします 。
バインディングのコンテキストメニューから、 好みのバインディングを選択します 。

これを実行した後、選択した優先ステップでバンドルが自動的に更新されます。

dotnet bundleコマンド

ASP.NET Core RTMリリースでは、既存のASP.NETコアアプリケーションに簡単に統合でき、外部拡張機能やスクリプトファイルを必要としないBundlerおよびMinificationツールである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ファイルをプロジェクトに追加する必要があります。最小構成は以下の通りです：

[
  {
    "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 dotnet bundleコマンドを追加することで、ビルドプロセスの一部として自動化できます。

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

使用可能なコマンド

使用可能なすべてのコマンドとその説明のリストが以下に表示されます。

bundleconfig.json bundle - bundleconfig.jsonファイルを使用してbundleコマンドを実行して、指定されたファイルをバンドルおよび縮小します。
dotnet bundle clean - 既存のすべての出力ファイルをディスクから消去します。
dotnet bundle watch - bundleconfig.json設定の既存の入力ファイルがファイルをdotnet bundleたびに、自動的にbundleconfig.json dotnet bundle実行するウォッチャーを作成します。
dotnet bundle help - 使用可能なすべてのヘルプオプションと、コマンドラインインターフェイスの使用方法を表示します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

asp.net-core
束縛と小型化

サーチ…