asp.net-core
Bundling e Minification

Grunt e Gulp

Nelle app ASP.NET Core, si raggruppano e si minimizzano le risorse lato client durante la fase di progettazione utilizzando strumenti di terze parti, come Gulp e Grunt . Utilizzando il raggruppamento e la minimizzazione in fase di progettazione, i file minificati vengono creati prima della distribuzione dell'applicazione. Raggruppare e minimizzare prima della distribuzione offre il vantaggio di un ridotto carico del server. Tuttavia, è importante riconoscere che il raggruppamento e la minificazione in fase di progettazione aumentano la complessità di creazione e funzionano solo con file statici.

Questo viene fatto in ASP.NET Core configurando Gulp tramite un file gulpfile.js all'interno del tuo progetto:

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

Questo approccio raggruppa e ridimensiona correttamente i file Javascript e CSS esistenti rispettivamente in base alle directory e agli schemi di globbing utilizzati.

Bundler e Minifier Extension

Visual Studio include anche un'estensione Bundler e Minifier disponibile che è in grado di gestire questo processo per te. L'estensione consente di selezionare e raggruppare facilmente i file necessari senza scrivere una riga di codice.

Costruire i tuoi pacchi

Dopo aver installato l'estensione, si selezionano tutti i file specifici che si desidera includere in un pacchetto e si utilizza l'opzione Bundle and Minify Files dall'estensione:

Questo ti richiederà di nominare il tuo gruppo e scegliere una posizione in cui salvarlo. Noterai quindi un nuovo file all'interno del tuo progetto chiamato bundleconfig.json che assomiglia al seguente:

[
  {
    "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: l'ordine in cui i file sono selezionati determinerà l'ordine in cui appaiono all'interno del gruppo, quindi se si hanno delle dipendenze, assicurarsi di tenerne conto.

Minifying Your Bundles

Ora il passaggio precedente sarà semplicemente raggruppare i file, se si desidera ridurre il pacchetto, è necessario indicarlo all'interno del file bundleconfig.json. Semplicemente aggiungi un blocco minify come il seguente al tuo pacchetto esistente per indicare che lo vuoi minificato:

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

Automatizza i tuoi pacchetti

Infine, se si desidera automatizzare questo processo, è possibile pianificare un'attività da eseguire ogni volta che l'applicazione viene creata per garantire che i propri pacchetti riflettano eventuali modifiche all'interno dell'applicazione.

Per fare questo, dovrai fare quanto segue:

• Aprire il Task Runner Explorer (tramite Strumenti> Task Runner Explorer).
• Fare clic con il tasto destro del mouse sull'opzione Aggiorna tutti i file sotto bundleconfig.json .
• Seleziona l'associazione preferita dal menu di scelta rapida Bindings.

Dopo averlo fatto, i tuoi bundle dovrebbero essere aggiornati automaticamente nel passaggio preferito selezionato.

Il comando dotnet bundle

La versione di ASP.NET Core RTM ha introdotto BundlerMinifier.Core , un nuovo strumento di raggruppamento e minificazione che può essere facilmente integrato nelle applicazioni esistenti di ASP.NET Core e non richiede estensioni esterne o file di script.

Utilizzando BundlerMinifier.Core

Per utilizzare questo strumento, è sufficiente aggiungere un riferimento a BundlerMinifier.Core nella sezione tools del file project.json esistente come mostrato di seguito:

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

Configurazione dei pacchetti

Dopo aver aggiunto lo strumento, dovrai aggiungere un file bundleconfig.json nel progetto che verrà utilizzato per configurare i file che desideri includere nei tuoi bundle. Di seguito è riportata una configurazione minima:

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

Creazione / Aggiornamento di pacchetti

Dopo aver configurato i bundle, puoi raggruppare e ridimensionare i file esistenti tramite il seguente comando:

dotnet bundle

Bundling automatico

Il processo di raggruppamento e minificazione può essere automatizzato come parte del processo di compilazione aggiungendo il comando dotnet bundle nella sezione di precompilazione del file project.json esistente:

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

Comandi disponibili

Puoi vedere una lista di tutti i comandi disponibili e le loro descrizioni qui sotto:

• dotnet bundle - Esegue il comando bundle utilizzando il file bundleconfig.json per raggruppare e bundleconfig.json file specificati.
• dotnet bundle clean - Cancella tutti i file di output esistenti dal disco.
• dotnet bundle watch : crea osservatori che eseguiranno automaticamente il dotnet bundle ogni volta che un file di input esistente dalla configurazione bundleconfig.json raggruppa i file.
• help bundle dotnet : visualizza tutte le opzioni di guida disponibili e le istruzioni per l'utilizzo dell'interfaccia della riga di comando.