asp.net-core
Empaquetado y Minificación

Gruñido y gulp

En las aplicaciones de ASP.NET Core, agrupa y minimiza los recursos del lado del cliente durante el tiempo de diseño utilizando herramientas de terceros, como Gulp y Grunt . Al utilizar la agrupación y minimización en tiempo de diseño, los archivos minificados se crean antes del despliegue de la aplicación. Agrupar y minimizar antes de la implementación proporciona la ventaja de una carga de servidor reducida. Sin embargo, es importante reconocer que la agrupación en tiempo de diseño y la minificación aumentan la complejidad de construcción y solo funcionan con archivos estáticos.

Esto se hace en ASP.NET Core configurando Gulp a través de un archivo gulpfile.js dentro de su proyecto:

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

Este enfoque agrupará y minimizará adecuadamente sus archivos Javascript y CSS existentes, respectivamente, de acuerdo con los directorios y los patrones globales que se utilizan.

Extensión Bundler y Minifier

Visual Studio también cuenta con una extensión Bundler y Minifier disponible que es capaz de manejar este proceso por usted. La extensión le permite seleccionar y agrupar fácilmente los archivos que necesita sin escribir una línea de código.

Construyendo tus paquetes

Después de instalar la extensión, selecciona todos los archivos específicos que deseas incluir dentro de un paquete y usas la opción Bundle and Minify Files de la extensión:

Esto le pedirá que nombre su paquete y elija una ubicación para guardarlo. Luego notará un nuevo archivo dentro de su proyecto llamado bundleconfig.json que se parece a lo siguiente:

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

NOTA: El orden en el que se seleccionan los archivos determinará el orden en el que aparecerán dentro del paquete, por lo que, si tiene dependencias, asegúrese de tenerlo en cuenta.

Reducir sus paquetes

Ahora, el paso anterior simplemente agrupará sus archivos, si desea reducir el tamaño del paquete, debe indicar eso dentro del archivo bundleconfig.json. Simplemente agregue un bloque minify como el siguiente a su paquete existente para indicar que desea que se minimice:

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

Automatiza tus paquetes

Finalmente, si desea automatizar este proceso, puede programar una tarea para que se ejecute siempre que su aplicación esté diseñada para garantizar que sus paquetes reflejen cualquier cambio dentro de su aplicación.

Para hacer esto, necesitarás hacer lo siguiente:

• Abra el Explorador de tareas Runner (a través de Herramientas> Explorador de tareas Runner).
• Haga clic derecho en la opción Actualizar todos los archivos debajo de bundleconfig.json .
• Seleccione su enlace preferido en el menú contextual de enlaces.

Después de hacer esto, sus paquetes se actualizarán automáticamente en el paso preferido que seleccionó.

El comando dotnet bundle

El lanzamiento de ASP.NET Core RTM presentó BundlerMinifier.Core , una nueva herramienta de empaquetado y minificación que se puede integrar fácilmente en las aplicaciones existentes de ASP.NET Core y no requiere extensiones externas ni archivos de script.

Usando BundlerMinifier.Core

Para usar esta herramienta, simplemente agregue una referencia a BundlerMinifier.Core dentro de la sección de tools de su archivo project.json existente como se ve a continuación:

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

Configurando tus paquetes

Después de agregar la herramienta, deberá agregar un archivo bundleconfig.json en su proyecto que se usará para configurar los archivos que desea incluir dentro de sus paquetes. Una configuración mínima se puede ver a continuación:

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

Creación / actualización de paquetes

Una vez que se hayan configurado sus paquetes, puede agrupar y minimizar sus archivos existentes mediante el siguiente comando:

dotnet bundle

Bundling automatizado

El proceso de Bundling and Minification se puede automatizar como parte del proceso de compilación agregando el comando dotnet bundle en la sección de precompilación de su archivo project.json existente:

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

Comandos disponibles

Puede ver una lista de todos los comandos disponibles y sus descripciones a continuación:

• dotnet bundle : ejecuta el comando bundle utilizando el archivo bundleconfig.json para agrupar y minimizar los archivos especificados.
• dotnet bundle clean : borra todos los archivos de salida existentes del disco.
• dotnet bundle watch : crea un observador que ejecutará automáticamente el dotnet bundle cada vez que un archivo de entrada existente desde la configuración de bundleconfig.json sus archivos.
• Ayuda de dotnet bundle : muestra todas las opciones de ayuda disponibles e instrucciones para usar la interfaz de línea de comandos.