asp.net-core
Regroupement et Minification

Grunt et Gulp

Dans les applications ASP.NET Core, vous regroupez et gérez les ressources côté client pendant la conception à l'aide d'outils tiers, tels que Gulp et Grunt . En utilisant le regroupement et la minification au moment du design, les fichiers minifiés sont créés avant le déploiement de l'application. Le regroupement et la minimisation avant le déploiement offrent l'avantage de réduire la charge du serveur. Cependant, il est important de reconnaître que le regroupement et la minification au moment du design augmentent la complexité de la construction et ne fonctionnent qu'avec des fichiers statiques.

Cela se fait dans ASP.NET Core en configurant Gulp via un fichier gulpfile.js dans votre projet:

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

Cette approche va regrouper et minimiser correctement vos fichiers Javascript et CSS existants en fonction des répertoires et des modèles de globalisation utilisés.

Extension Bundler et Minifier

Visual Studio propose également une extension Bundler and Minifier disponible capable de gérer ce processus pour vous. L'extension vous permet de sélectionner et de regrouper facilement les fichiers dont vous avez besoin sans écrire de ligne de code.

Construire vos paquets

Après avoir installé l'extension, sélectionnez tous les fichiers spécifiques à inclure dans un ensemble et utilisez l'option Assembler et réduire les fichiers de l'extension:

Cela vous invitera à nommer votre paquet et à choisir un emplacement pour le sauvegarder. Vous remarquerez alors un nouveau fichier dans votre projet appelé bundleconfig.json qui ressemble à ceci:

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

REMARQUE: L'ordre dans lequel les fichiers sont sélectionnés déterminera l'ordre dans lequel ils apparaissent dans l'ensemble, donc si vous avez des dépendances, assurez-vous d'en tenir compte.

Réduire vos paquets

Maintenant, l'étape précédente regroupera simplement vos fichiers, si vous souhaitez en réduire la taille, vous devez l'indiquer dans le fichier bundleconfig.json. Ajoutez simplement un bloc de minify comme le suivant à votre bundle existant pour indiquer que vous voulez le minifier:

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

Automatisez vos paquets

Enfin, si vous souhaitez automatiser ce processus, vous pouvez planifier l'exécution d'une tâche à chaque fois que votre application est créée pour garantir que vos offres reflètent toutes les modifications de votre application.

Pour ce faire, vous devez procéder comme suit:

• Ouvrez l'explorateur de tâches (via Outils> Explorateur de tâches).
• Cliquez avec le bouton droit sur l'option Mettre à jour tous les fichiers sous bundleconfig.json .
• Sélectionnez votre liaison préférée dans le menu contextuel Liaisons.

Après cela, vos ensembles doivent être automatiquement mis à jour à l’étape que vous avez sélectionnée.

La commande dotnet bundle

La version ASP.NET Core RTM a introduit BundlerMinifier.Core , un nouvel outil de regroupement et de simplification qui peut être facilement intégré dans les applications ASP.NET Core existantes et ne nécessite aucune extension externe ni fichier de script.

Utiliser BundlerMinifier.Core

Pour utiliser cet outil, ajoutez simplement une référence à BundlerMinifier.Core dans la section des tools de votre fichier project.json existant, comme indiqué ci-dessous:

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

Configuration de vos bundles

Après avoir ajouté l'outil, vous devrez ajouter un fichier bundleconfig.json dans votre projet qui sera utilisé pour configurer les fichiers que vous souhaitez inclure dans vos ensembles. Une configuration minimale peut être vue ci-dessous:

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

Création / mise à jour de bundles

Une fois vos offres configurées, vous pouvez regrouper et minimiser vos fichiers existants à l'aide de la commande suivante:

dotnet bundle

Groupage automatisé

Le processus de regroupement et de réduction peut être automatisé dans le cadre du processus de génération en ajoutant la commande dotnet bundle dans la section dotnet bundle de votre fichier project.json existant:

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

Commandes disponibles

Vous pouvez voir une liste de toutes les commandes disponibles et leurs descriptions ci-dessous:

• dotnet bundle - Exécute la commande bundle à l'aide du fichier bundleconfig.json pour regrouper et réduire vos fichiers spécifiés.
• dotnet bundle clean - Efface tous les fichiers de sortie existants du disque.
• dotnet bundle watch - Crée des observateurs qui exécutent automatiquement dotnet bundle chaque fois qu'un fichier d'entrée existant de la configuration bundleconfig.json regroupe vos fichiers.
• dotnet bundle help - Affiche toutes les options d'aide disponibles et les instructions pour utiliser l'interface de ligne de commande.