asp.net-core
Bundling och Minification

Grunt och Gulp

I ASP.NET Core-appar buntar du och minifierar resurserna på klientsidan under designtid med hjälp av tredje parts verktyg, till exempel Gulp och Grunt . Genom att använda paket och minifiering av designtid skapas de minifierade filerna innan applikationen distribueras. Bundling och minifiering före distribution ger fördelen med minskad serverbelastning. Det är emellertid viktigt att inse att paket och minifiering av designtid ökar komplexiteten och bara fungerar med statiska filer.

Detta görs i ASP.NET Core genom att konfigurera Gulp via en gulpfile.js fil i ditt projekt:

// 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("."));
});

Det här tillvägagångssättet kommer att paketera och förminska dina befintliga Javascript- och CSS-filer på rätt sätt i enlighet med de kataloger och klotmönster som används.

Bundler och Minifier Extension

Visual Studio har också en tillgänglig Bundler- och Minifier-förlängning som kan hantera den här processen åt dig. Tillägget låter dig enkelt välja och binda de filer du behöver utan att skriva en kodrad.

Bygg dina paket

När du har installerat tillägget väljer du alla specifika filer som du vill inkludera i ett paket och använder alternativet Paket och Minifiera filer från tillägget:

Detta kommer att uppmana dig att namnge ditt paket och välja en plats att spara den på. Du kommer då att märka en ny fil i ditt projekt som heter bundleconfig.json som ser ut som följande:

[
  {
    "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" 
    ]
  }
]

OBS! I vilken ordning filerna väljs bestämmer ordningen de visas i paketet, så om du har några beroenden, se till att du tar hänsyn till det.

Minifiera dina paket

Nu kommer det föregående steget bara att paketera dina filer, om du vill förminska paketet, måste du ange att det finns filen bundleconfig.json. Lägg bara till ett minify block som följande i ditt befintliga paket för att indikera att du vill att det ska minifieras:

[
  {
    "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
    }
  }
]

Automatisera dina paket

Slutligen, om du vill automatisera den här processen, kan du schemalägga en uppgift som ska köras när din ansökan är byggd för att säkerställa att dina paket återspeglar eventuella ändringar i din applikation.

För att göra detta måste du göra följande:

• Öppna Task Runner Explorer (via Verktyg> Task Runner Explorer).
• Högerklicka på alternativet Uppdatera alla filer nedanför bundleconfig.json .
• Välj önskad bindning från sammanhangsmenyn Bindningar.

När du har gjort detta bör dina buntar automatiskt uppdateras i det önskade steget du valde.

Dotnet-paketet Kommando

ASP.NET Core RTM-lanseringen introducerade BundlerMinifier.Core , ett nytt paket- och minifieringsverktyg som enkelt kan integreras i befintliga ASP.NET Core-applikationer och inte kräver några externa tillägg eller skriptfiler.

Använda BundlerMinifier.Core

För att använda det här verktyget, lägg bara till en referens till BundlerMinifier.Core i tools i din befintliga project.json fil, som project.json nedan:

"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"
}

Konfigurera dina paket

När du har lagt till verktyget måste du lägga till en bundleconfig.json fil i ditt projekt som kommer att användas för att konfigurera filerna som du vill inkludera i dina paket. En minimal konfiguration kan ses nedan:

[
  {
    "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
    }
  }
]

Skapa / uppdatera paket

När dina buntar har konfigurerats kan du paketera och förminska dina befintliga filer via följande kommando:

dotnet bundle

Automatiskt paket

Bundling- och Minification-processen kan automatiseras som en del av byggprocessen genom att lägga till dotnet bundle i förkompileringsavsnittet i din befintliga project.json fil:

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

Tillgängliga kommandon

Du kan se en lista över alla tillgängliga kommandon och deras beskrivningar nedan:

• dotnet bundle - Utför bundleconfig.json filen bundleconfig.json för att paketera och förminska dina angivna filer.
• dotnet-paketet rensar - Rensar alla befintliga utdatafiler från disken.
• dotnet bundle watch - Skapar en tittare som automatiskt kommer att köra dotnet bundle när en befintlig inmatningsfil från bundleconfig.json konfigurationen för att paketera dina filer.
• dotnet bundle help - Visar alla tillgängliga hjälpalternativ och instruktioner för användning av kommandoradsgränssnittet.