asp.net-core
Bundelen en verkleinen

Gegrom en Gulp

In ASP.NET Core-apps bundelt en verkleint u de bronnen aan de clientzijde tijdens het ontwerp met tools van derden, zoals Gulp en Grunt . Door design-time bundeling en minification te gebruiken, worden de geminimaliseerde bestanden voorafgaand aan de implementatie van de applicatie gemaakt. Bundelen en verkleinen vóór implementatie biedt het voordeel van verminderde serverbelasting. Het is echter belangrijk om te erkennen dat ontwerptijdbundeling en minificatie de bouwcomplexiteit verhoogt en alleen werkt met statische bestanden.

Dit wordt gedaan in ASP.NET Core door Gulp te configureren via een gulpfile.js bestand binnen uw project:

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

Deze aanpak bundelt en verkleint uw bestaande Javascript- en CSS-bestanden, respectievelijk in overeenstemming met de gebruikte mappen en globale patronen.

Bundler en Minifier extensie

Visual Studio beschikt ook over een beschikbare Bundler- en Minifier-extensie die dit proces voor u kan afhandelen. Met de extensie kunt u eenvoudig de gewenste bestanden selecteren en bundelen zonder een coderegel te hoeven schrijven.

Uw bundels bouwen

Nadat u de extensie hebt geïnstalleerd, selecteert u alle specifieke bestanden die u in een bundel wilt opnemen en gebruikt u de optie Bundle and Minify Files van de extensie:

Dit zal u vragen om uw bundel een naam te geven en een locatie te kiezen om het op te slaan. Je zult dan een nieuw bestand binnen je project bundleconfig.json genaamd bundleconfig.json dat er als volgt uitziet:

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

OPMERKING: De volgorde waarin de bestanden worden geselecteerd, bepaalt de volgorde waarin ze in de bundel worden weergegeven, dus als u afhankelijkheden hebt, moet u hiermee rekening houden.

Uw bundels verkleinen

Nu bundelt de vorige stap eenvoudig uw bestanden, als u de bundel wilt verkleinen, moet u dat aangeven in het bestand bundleconfig.json. Voeg eenvoudig een minify blok zoals het volgende toe aan uw bestaande bundel om aan te geven dat u het wilt verkleinen:

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

Automatiseer uw bundels

Ten slotte, als u dit proces wilt automatiseren, kunt u een taak plannen die wordt uitgevoerd wanneer uw toepassing is gebouwd om ervoor te zorgen dat uw bundels eventuele wijzigingen in uw toepassing weerspiegelen.

Om dit te doen, moet u het volgende doen:

• Open de Task Runner Explorer (via Extra> Task Runner Explorer).
• Klik met de rechtermuisknop op de optie Alle bestanden bijwerken onder bundleconfig.json .
• Selecteer de gewenste binding in het contextmenu Bindingen.

Nadat u dit hebt gedaan, moeten uw bundels automatisch worden bijgewerkt in de gewenste stap die u hebt geselecteerd.

De dotnet-bundelopdracht

De ASP.NET Core RTM-release introduceerde BundlerMinifier.Core , een nieuwe tool voor bundelen en verkleinen die eenvoudig kan worden geïntegreerd in bestaande ASP.NET Core-applicaties en geen externe extensies of scriptbestanden vereist.

BundlerMinifier.Core gebruiken

Om deze tool te gebruiken, een verwijzing toe te voegen gewoon BundlerMinifier.Core binnen de tools sectie van uw bestaande project.json bestand zoals te zien hieronder:

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

Uw bundels configureren

Nadat u de tool hebt toegevoegd, moet u een bestand bundleconfig.json toevoegen aan uw project dat wordt gebruikt om de bestanden te configureren die u in uw bundels wilt opnemen. Een minimale configuratie is hieronder te zien:

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

Bundels maken / bijwerken

Nadat uw bundels zijn geconfigureerd, kunt u uw bestaande bestanden bundelen en verkleinen met de volgende opdracht:

dotnet bundle

Geautomatiseerde bundeling

Het Bundeling and Minification-proces kan worden geautomatiseerd als onderdeel van het build-proces door de dotnet bundle toe te voegen in het dotnet bundle van uw bestaande project.json bestand:

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

Beschikbare opdrachten

Hieronder ziet u een lijst met alle beschikbare opdrachten en hun beschrijvingen:

• dotnet-bundel - Voert de bundleconfig.json met het bestand bundleconfig.json om de opgegeven bestanden te bundelen en verkleinen.
• dotnet bundle clean - Wist alle bestaande uitvoerbestanden van schijf.
• dotnet bundle watch - Creëert watchers die automatisch een dotnet bundle wanneer een bestaand invoerbestand uit de bundleconfig.json configuratie uw bestanden bundelt.
• dotnet bundle help - Toont alle beschikbare help-opties en instructies voor het gebruik van de opdrachtregelinterface.