Aggregare e minimizzare asset statici in ASP.NET CoreBundle and minify static assets in ASP.NET Core

Di Scott Addie e David PineBy Scott Addie and David Pine

Questo articolo illustra i vantaggi dell'applicazione di bundle e minification, incluso il modo in cui queste funzionalità possono essere usate con ASP.NET Core app Web.This article explains the benefits of applying bundling and minification, including how these features can be used with ASP.NET Core web apps.

Che cos'è la creazione di bundle e minificationWhat is bundling and minification

La creazione di bundle e minification sono due ottimizzazioni delle prestazioni distinte che è possibile applicare in un'app Web.Bundling and minification are two distinct performance optimizations you can apply in a web app. Usati insieme, bundleing e minification migliorano le prestazioni riducendo il numero di richieste server e riducendo le dimensioni degli asset statici richiesti.Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets.

La creazione di bundle e minification migliora principalmente il tempo di caricamento della prima richiesta di pagina.Bundling and minification primarily improve the first page request load time. Una volta richiesta una pagina Web, il browser memorizza nella cache gli asset statici (JavaScript, CSS e immagini).Once a web page has been requested, the browser caches the static assets (JavaScript, CSS, and images). Di conseguenza, la creazione di bundle e minification non migliora le prestazioni quando si richiede la stessa pagina o pagine nello stesso sito che richiede le stesse risorse.Consequently, bundling and minification don't improve performance when requesting the same page, or pages, on the same site requesting the same assets. Se l'intestazione Expires non è impostata correttamente negli asset e se non si usa la funzionalità di aggregazione e minification, l'euristica di aggiornamento del browser contrassegna gli asset obsoleti dopo alcuni giorni.If the expires header isn't set correctly on the assets and if bundling and minification isn't used, the browser's freshness heuristics mark the assets stale after a few days. Inoltre, il browser richiede una richiesta di convalida per ogni asset.Additionally, the browser requires a validation request for each asset. In questo caso, la creazione di bundle e minification fornisce un miglioramento delle prestazioni anche dopo la prima richiesta di pagina.In this case, bundling and minification provide a performance improvement even after the first page request.

BundleBundling

La creazione di bundle consente di combinare più file in un unico file.Bundling combines multiple files into a single file. La creazione di bundle riduce il numero di richieste del server necessarie per il rendering di un asset Web, ad esempio una pagina Web.Bundling reduces the number of server requests that are necessary to render a web asset, such as a web page. È possibile creare un numero qualsiasi di bundle individuali in modo specifico per CSS, JavaScript e così via. Un numero inferiore di file indica un minor numero di richieste HTTP dal browser al server o dal servizio che fornisce l'applicazione.You can create any number of individual bundles specifically for CSS, JavaScript, etc. Fewer files means fewer HTTP requests from the browser to the server or from the service providing your application. Ciò comporta un miglioramento delle prime prestazioni di caricamento della pagina.This results in improved first page load performance.

MinificationMinification

Minification rimuove i caratteri non necessari dal codice senza alterare le funzionalità.Minification removes unnecessary characters from code without altering functionality. Il risultato è una riduzione significativa delle dimensioni negli asset richiesti, ad esempio CSS, immagini e file JavaScript.The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files). Gli effetti collaterali comuni di minification includono l'abbreviazione di nomi di variabili a un carattere e la rimozione di commenti e spazi vuoti superflui.Common side effects of minification include shortening variable names to one character and removing comments and unnecessary whitespace.

Si consideri la funzione JavaScript seguente:Consider the following JavaScript function:

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minification riduce la funzione a quanto segue:Minification reduces the function to the following:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Oltre a rimuovere i commenti e gli spazi vuoti superflui, i nomi dei parametri e delle variabili seguenti sono stati rinominati come segue:In addition to removing the comments and unnecessary whitespace, the following parameter and variable names were renamed as follows:

OriginaleOriginal RidenominazioneRenamed
imageTagAndImageID t
imageContext a
imageElement r

Effetti della creazione di bundle e minificationImpact of bundling and minification

Nella tabella seguente vengono descritte le differenze tra il caricamento individuale degli asset e l'utilizzo di bundle e minification:The following table outlines differences between individually loading assets and using bundling and minification:

AzioneAction Con B/MWith B/M Senza B/MWithout B/M ModificaChange
Richieste di fileFile Requests 77 1818 157%157%
KB trasferitiKB Transferred 156156 264.68264.68 70%70%
Tempo di caricamento (MS)Load Time (ms) 885885 23602360 167%167%

I browser sono piuttosto dettagliati rispetto alle intestazioni delle richieste HTTP.Browsers are fairly verbose with regard to HTTP request headers. La metrica totale dei byte inviati ha rilevato una riduzione significativa durante la creazione del bundle.The total bytes sent metric saw a significant reduction when bundling. Il tempo di caricamento Mostra un miglioramento significativo, tuttavia questo esempio è stato eseguito localmente.The load time shows a significant improvement, however this example ran locally. Quando si usa la creazione di bundle e minification con asset trasferiti in una rete, si ottengono maggiori vantaggi a livello di prestazioni.Greater performance gains are realized when using bundling and minification with assets transferred over a network.

Scegliere una strategia di raggruppamento e minificationChoose a bundling and minification strategy

I modelli di progetto MVC e Razor Pages offrono una soluzione predefinita per la creazione di bundle e minification costituita da un file di configurazione JSON.The MVC and Razor Pages project templates provide an out-of-the-box solution for bundling and minification consisting of a JSON configuration file. Gli strumenti di terze parti, ad esempio l'attività Runner, eseguono le stesse attività con una maggiore complessità.Third-party tools, such as the Grunt task runner, accomplish the same tasks with a bit more complexity. Uno strumento di terze parti è un'ottima soluzione quando il flusso di lavoro di sviluppo richiede l'elaborazione oltre la creazione di bundle e minification—, ad esempio l'ottimizzazione delle immagini e dei pelucchi.A third-party tool is a great fit when your development workflow requires processing beyond bundling and minification—such as linting and image optimization. Con la creazione di bundle e minification in fase di progettazione, i file minimizzati vengono creati prima della distribuzione dell'app.By using design-time bundling and minification, the minified files are created prior to the app's deployment. La creazione di bundle e minimizzazione prima della distribuzione offre il vantaggio di ridurre il carico del server.Bundling and minifying before deployment provides the advantage of reduced server load. Tuttavia, è importante riconoscere che la creazione di bundle in fase di progettazione e minification aumenta la complessità della compilazione e funziona solo con i file statici.However, it's important to recognize that design-time bundling and minification increases build complexity and only works with static files.

Configurare la creazione di bundle e minificationConfigure bundling and minification

In ASP.NET Core 2,0 o versioni precedenti, i modelli di progetto MVC e Razor Pages forniscono un file di configurazione bundleconfig. JSON che definisce le opzioni per ogni bundle:In ASP.NET Core 2.0 or earlier, the MVC and Razor Pages project templates provide a bundleconfig.json configuration file that defines the options for each bundle:

In ASP.NET Core 2,1 o versioni successive aggiungere un nuovo file JSON, denominato bundleconfig. JSON, alla radice del progetto MVC o Razor Pages.In ASP.NET Core 2.1 or later, add a new JSON file, named bundleconfig.json, to the MVC or Razor Pages project root. Includere nel file il codice JSON seguente come punto di partenza:Include the following JSON in that file as a starting point:

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

Il file bundleconfig. JSON definisce le opzioni per ogni bundle.The bundleconfig.json file defines the options for each bundle. Nell'esempio precedente, viene definita una singola configurazione di bundle per i file personalizzati JavaScript (wwwroot/JS/site. js) e StyleSheet (wwwroot/CSS/site. CSS).In the preceding example, a single bundle configuration is defined for the custom JavaScript (wwwroot/js/site.js) and stylesheet (wwwroot/css/site.css) files.

Le opzioni di configurazione possibili sono:Configuration options include:

  • outputFileName: il nome del file di bundle da restituire.outputFileName: The name of the bundle file to output. Può contenere un percorso relativo dal file bundleconfig. JSON .Can contain a relative path from the bundleconfig.json file. requiredrequired
  • inputFiles: matrice di file da raggruppare insieme.inputFiles: An array of files to bundle together. Si tratta di percorsi relativi del file di configurazione.These are relative paths to the configuration file. facoltativo, * un valore vuoto restituisce un file di output vuoto.optional, *an empty value results in an empty output file. sono supportati i modelli glob .globbing patterns are supported.
  • minify: opzioni minification per il tipo di output.minify: The minification options for the output type. facoltativo, minify: { enabled: true }predefinitooptional, default - minify: { enabled: true }
  • includeInProject: flag che indica se aggiungere i file generati al file di progetto.includeInProject: Flag indicating whether to add generated files to project file. facoltativo, valore predefinito-falseoptional, default - false
  • sourceMap: flag che indica se generare una mappa di origine per il file in bundle.sourceMap: Flag indicating whether to generate a source map for the bundled file. facoltativo, valore predefinito-falseoptional, default - false
  • sourceMapRootPath: percorso radice per archiviare il file di mapping di origine generato.sourceMapRootPath: The root path for storing the generated source map file.

Esecuzione in fase di compilazione della creazione di bundle e minificationBuild-time execution of bundling and minification

Il pacchetto NuGet BuildBundlerMinifier consente l'esecuzione di bundle e minification in fase di compilazione.The BuildBundlerMinifier NuGet package enables the execution of bundling and minification at build time. Il pacchetto inserisce destinazioni MSBuild che vengono eseguite in fase di compilazione e di pulizia.The package injects MSBuild Targets which run at build and clean time. Il file bundleconfig. JSON viene analizzato dal processo di compilazione per produrre i file di output in base alla configurazione definita.The bundleconfig.json file is analyzed by the build process to produce the output files based on the defined configuration.

Nota

BuildBundlerMinifier appartiene a un progetto gestito dalla community su GitHub per cui Microsoft non fornisce alcun supporto.BuildBundlerMinifier belongs to a community-driven project on GitHub for which Microsoft provides no support. I problemi devono essere presentati qui.Issues should be filed here.

Aggiungere il pacchetto BuildBundlerMinifier al progetto.Add the BuildBundlerMinifier package to your project.

Compilazione del progetto.Build the project. Nella finestra di output verrà visualizzato quanto segue:The following appears in the Output window:

1>------ Build started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>
1>Bundler: Begin processing bundleconfig.json
1>  Minified wwwroot/css/site.min.css
1>  Minified wwwroot/js/site.min.js
1>Bundler: Done processing bundleconfig.json
1>BuildBundlerMinifierApp -> C:\BuildBundlerMinifierApp\bin\Debug\netcoreapp2.0\BuildBundlerMinifierApp.dll
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

Pulire il progetto.Clean the project. Nella finestra di output verrà visualizzato quanto segue:The following appears in the Output window:

1>------ Clean started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>
1>Bundler: Cleaning output from bundleconfig.json
1>Bundler: Done cleaning output file from bundleconfig.json
========== Clean: 1 succeeded, 0 failed, 0 skipped ==========

Esecuzione ad hoc di bundle e minificationAd hoc execution of bundling and minification

È possibile eseguire le attività di creazione di bundle e minification su base ad hoc, senza compilare il progetto.It's possible to run the bundling and minification tasks on an ad hoc basis, without building the project. Aggiungere il pacchetto NuGet BundlerMinifier. Core al progetto:Add the BundlerMinifier.Core NuGet package to your project:

<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" />

Nota

BundlerMinifier. Core appartiene a un progetto gestito dalla community in GitHub per cui Microsoft non fornisce alcun supporto.BundlerMinifier.Core belongs to a community-driven project on GitHub for which Microsoft provides no support. I problemi devono essere presentati qui.Issues should be filed here.

Questo pacchetto estende il interfaccia della riga di comando di .NET Core per includere lo strumento DotNet-bundle .This package extends the .NET Core CLI to include the dotnet-bundle tool. Il comando seguente può essere eseguito nella finestra console di gestione pacchetti (PMC) o in una shell dei comandi:The following command can be executed in the Package Manager Console (PMC) window or in a command shell:

dotnet bundle

Importante

Gestione pacchetti NuGet aggiunge le dipendenze al file *.csproj come <PackageReference /> nodi.NuGet Package Manager adds dependencies to the *.csproj file as <PackageReference /> nodes. Il comando dotnet bundle viene registrato con l'interfaccia della riga di comando di .NET Core solo quando viene usato un nodo <DotNetCliToolReference />.The dotnet bundle command is registered with the .NET Core CLI only when a <DotNetCliToolReference /> node is used. Modificare di conseguenza il file *. csproj.Modify the *.csproj file accordingly.

Aggiunta di file al flusso di lavoroAdd files to workflow

Si consideri un esempio in cui viene aggiunto un file CSS personalizzato aggiuntivo simile al seguente:Consider an example in which an additional custom.css file is added resembling the following:

.about, [role=main], [role=complementary] {
    margin-top: 60px;
}

footer {
    margin-top: 10px;
}

Per minimizzare Custom. CSS e aggregarlo con site. CSS in un file site. min. CSS , aggiungere il percorso relativo di bundleconfig. JSON:To minify custom.css and bundle it with site.css into a site.min.css file, add the relative path to bundleconfig.json:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/custom.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

Nota

In alternativa, è possibile usare il modello glob seguente:Alternatively, the following globbing pattern could be used:

"inputFiles": ["wwwroot/**/!(*.min).css" ]

Questo modello glob corrisponde a tutti i file CSS ed esclude il modello di file minimizzati.This globbing pattern matches all CSS files and excludes the minified file pattern.

Compilare l'applicazione.Build the application. Aprire site. min. CSS e notare che il contenuto di Custom. CSS viene aggiunto alla fine del file.Open site.min.css and notice the content of custom.css is appended to the end of the file.

Creazione di bundle e minification basati su ambienteEnvironment-based bundling and minification

Come procedura consigliata, i file in bundle e minimizzati dell'app devono essere usati in un ambiente di produzione.As a best practice, the bundled and minified files of your app should be used in a production environment. Durante lo sviluppo, i file originali rendono più semplice il debug dell'app.During development, the original files make for easier debugging of the app.

Specificare i file da includere nelle pagine usando l' Helper tag di ambiente nelle visualizzazioni.Specify which files to include in your pages by using the Environment Tag Helper in your views. L'helper tag di ambiente esegue il rendering del relativo contenuto solo quando è in esecuzione in ambientispecifici.The Environment Tag Helper only renders its contents when running in specific environments.

Il tag environment seguente esegue il rendering dei file CSS non elaborati durante l'esecuzione nell'ambiente Development:The following environment tag renders the unprocessed CSS files when running in the Development environment:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Il tag di environment seguente esegue il rendering dei file CSS in bundle e minimizzati quando è in esecuzione in un ambiente diverso da Development.The following environment tag renders the bundled and minified CSS files when running in an environment other than Development. Ad esempio, l'esecuzione in Production o Staging attiva il rendering di questi fogli di stile:For example, running in Production or Staging triggers the rendering of these stylesheets:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Utilizzare bundleconfig. JSON da GulpConsume bundleconfig.json from Gulp

Ci sono casi in cui il flusso di lavoro di aggregazione e minification di un'app richiede un'elaborazione aggiuntiva.There are cases in which an app's bundling and minification workflow requires additional processing. Gli esempi includono l'ottimizzazione delle immagini, la memorizzazione nella cache e l'elaborazione delle risorse della rete CDN.Examples include image optimization, cache busting, and CDN asset processing. Per soddisfare questi requisiti, è possibile convertire il flusso di lavoro di aggregazione e minification per usare Gulp.To satisfy these requirements, you can convert the bundling and minification workflow to use Gulp.

Usare l'estensione Minifier di bundler &Use the Bundler & Minifier extension

Visual Studio bundler & estensione Minifier gestisce la conversione in Gulp.The Visual Studio Bundler & Minifier extension handles the conversion to Gulp.

Nota

Il bundler & estensione Minifier appartiene a un progetto gestito dalla community su GitHub per cui Microsoft non fornisce alcun supporto.The Bundler & Minifier extension belongs to a community-driven project on GitHub for which Microsoft provides no support. I problemi devono essere presentati qui.Issues should be filed here.

Fare clic con il pulsante destro del mouse sul file bundleconfig. JSON in Esplora soluzioni e selezionare bundler & Minifier > Converti in Gulp... :Right-click the bundleconfig.json file in Solution Explorer and select Bundler & Minifier > Convert To Gulp...:

Voce di menu di scelta rapida Converti in Gulp

I file gulpfile. js e Package. JSON vengono aggiunti al progetto.The gulpfile.js and package.json files are added to the project. Sono installati i pacchetti NPM di supporto elencati nella sezione devDependencies del file Package. JSON .The supporting npm packages listed in the package.json file's devDependencies section are installed.

Eseguire il comando seguente nella finestra di PMC per installare l'interfaccia della riga di comando di Gulp come dipendenza globale:Run the following command in the PMC window to install the Gulp CLI as a global dependency:

npm i -g gulp-cli

Il file gulpfile. js legge il file bundleconfig. JSON per gli input, gli output e le impostazioni.The gulpfile.js file reads the bundleconfig.json file for the inputs, outputs, and settings.

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');

// Code omitted for brevity

Eseguire manualmente la conversioneConvert manually

Se Visual Studio e/o bundler & estensione Minifier non sono disponibili, eseguire la conversione manualmente.If Visual Studio and/or the Bundler & Minifier extension aren't available, convert manually.

Aggiungere un file Package. JSON , con i devDependenciesseguenti, alla radice del progetto:Add a package.json file, with the following devDependencies, to the project root:

Avviso

Il modulo gulp-uglify non supporta ECMAScript (ES) 2015/ES6 e versioni successive.The gulp-uglify module doesn't support ECMAScript (ES) 2015 / ES6 and later. Installare Gulp-Terser invece di gulp-uglify per usare ES2015/ES6 o versione successiva.Install gulp-terser instead of gulp-uglify to use ES2015 / ES6 or later.

"devDependencies": {
  "del": "^3.0.0",
  "gulp": "^4.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-cssmin": "^0.2.0",
  "gulp-htmlmin": "^3.0.0",
  "gulp-uglify": "^3.0.0",
  "merge-stream": "^1.0.1"
}

Installare le dipendenze eseguendo il comando seguente allo stesso livello di Package. JSON:Install the dependencies by running the following command at the same level as package.json:

npm i

Installare l'interfaccia della riga di comando di Gulp come dipendenza globale:Install the Gulp CLI as a global dependency:

npm i -g gulp-cli

Copiare il file gulpfile. js riportato di seguito nella radice del progetto:Copy the gulpfile.js file below to the project root:

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');

const regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task('min:js', async function () {
    merge(getBundles(regex.js).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:css', async function () {
    merge(getBundles(regex.css).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:html', async function () {
    merge(getBundles(regex.html).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min', gulp.series(['min:js', 'min:css', 'min:html']));

gulp.task('clean', () => {
    return del(bundleconfig.map(bundle => bundle.outputFileName));
});

gulp.task('watch', () => {
    getBundles(regex.js).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:js"])));

    getBundles(regex.css).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:css"])));

    getBundles(regex.html).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(['min:html'])));
});

const getBundles = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.outputFileName);
    });
};

gulp.task('default', gulp.series("min"));

Eseguire attività GulpRun Gulp tasks

Per attivare l'attività minification di Gulp prima della compilazione del progetto in Visual Studio, aggiungere la destinazione MSBuild seguente al file *. csproj:To trigger the Gulp minification task before the project builds in Visual Studio, add the following MSBuild Target to the *.csproj file:

<Target Name="MyPreCompileTarget" BeforeTargets="Build">
  <Exec Command="gulp min" />
</Target>

In questo esempio, qualsiasi attività definita all'interno della MyPreCompileTarget destinazione viene eseguita prima della destinazione Build predefinita.In this example, any tasks defined within the MyPreCompileTarget target run before the predefined Build target. Viene visualizzato un output simile al seguente nella finestra di output di Visual Studio:Output similar to the following appears in Visual Studio's Output window:

1>------ Build started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
1>BuildBundlerMinifierApp -> C:\BuildBundlerMinifierApp\bin\Debug\netcoreapp2.0\BuildBundlerMinifierApp.dll
1>[14:17:49] Using gulpfile C:\BuildBundlerMinifierApp\gulpfile.js
1>[14:17:49] Starting 'min:js'...
1>[14:17:49] Starting 'min:css'...
1>[14:17:49] Starting 'min:html'...
1>[14:17:49] Finished 'min:js' after 83 ms
1>[14:17:49] Finished 'min:css' after 88 ms
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

Risorse aggiuntiveAdditional resources