You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/client-side/bundling-and-minification.md
+3-131Lines changed: 3 additions & 131 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ author: scottaddie
4
4
description: Learn how to optimize static resources in an ASP.NET Core web application by applying bundling and minification techniques.
5
5
ms.author: scaddie
6
6
ms.custom: mvc
7
-
ms.date: 06/17/2019
7
+
ms.date: 04/15/2020
8
8
uid: client-side/bundling-and-minification
9
9
---
10
10
# Bundle and minify static assets in ASP.NET Core
@@ -57,7 +57,7 @@ Browsers are fairly verbose with regard to HTTP request headers. The total bytes
57
57
58
58
## Choose a bundling and minification strategy
59
59
60
-
The MVC and Razor Pages project templates provide an out-of-the-box solution for bundling and minification consisting of a JSON configuration file. Third-party tools, such as the [Grunt](xref:client-side/using-grunt) task runner, accomplish the same tasks with a bit more complexity. A third-party tool is a great fit when your development workflow requires processing beyond bundling and minification—such as linting and image optimization. By using design-time bundling and minification, the minified files are created prior to the app's deployment. Bundling and minifying before deployment provides the advantage of reduced server load. However, it's important to recognize that design-time bundling and minification increases build complexity and only works with static files.
60
+
The MVC and Razor Pages project templates provide a solution for bundling and minification consisting of a JSON configuration file. Third-party tools, such as the [Grunt](xref:client-side/using-grunt) task runner, accomplish the same tasks with a bit more complexity. A third-party tool is a great fit when your development workflow requires processing beyond bundling and minification—such as linting and image optimization. By using design-time bundling and minification, the minified files are created prior to the app's deployment. Bundling and minifying before deployment provides the advantage of reduced server load. However, it's important to recognize that design-time bundling and minification increases build complexity and only works with static files.
*`sourceMap`: Flag indicating whether to generate a source map for the bundled file. **optional**, *default - false*
91
91
*`sourceMapRootPath`: The root path for storing the generated source map file.
92
92
93
-
## Build-time execution of bundling and minification
94
-
95
-
The [BuildBundlerMinifier](https://www.nuget.org/packages/BuildBundlerMinifier/) NuGet package enables the execution of bundling and minification at build time. The package injects [MSBuild Targets](/visualstudio/msbuild/msbuild-targets) which run at build and clean time. The *bundleconfig.json* file is analyzed by the build process to produce the output files based on the defined configuration.
96
-
97
-
> [!NOTE]
98
-
> BuildBundlerMinifier belongs to a community-driven project on GitHub for which Microsoft provides no support. Issues should be filed [here](https://github.com/madskristensen/BundlerMinifier/issues).
99
-
100
-
# [Visual Studio](#tab/visual-studio)
101
-
102
-
Add the *BuildBundlerMinifier* package to your project.
103
-
104
-
Build the project. The following appears in the Output window:
105
-
106
-
```console
107
-
1>------ Build started: Project: BuildBundlerMinifierApp, Configuration: Debug Any CPU ------
Microsoft (R) Build Engine version 15.4.8.50001 for .NET Core
169
-
Copyright (C) Microsoft Corporation. All rights reserved.
170
-
171
-
172
-
Bundler: Cleaning output from bundleconfig.json
173
-
Bundler: Done cleaning output file from bundleconfig.json
174
-
```
175
-
176
-
---
177
-
178
-
## Ad hoc execution of bundling and minification
179
-
180
-
It's possible to run the bundling and minification tasks on an ad hoc basis, without building the project. Add the [BundlerMinifier.Core](https://www.nuget.org/packages/BundlerMinifier.Core/) NuGet package to your project:
> BundlerMinifier.Core belongs to a community-driven project on GitHub for which Microsoft provides no support. Issues should be filed [here](https://github.com/madskristensen/BundlerMinifier/issues).
186
-
187
-
This package extends the .NET Core CLI to include the *dotnet-bundle* tool. The following command can be executed in the Package Manager Console (PMC) window or in a command shell:
188
-
189
-
```dotnetcli
190
-
dotnet bundle
191
-
```
192
-
193
-
> [!IMPORTANT]
194
-
> NuGet Package Manager adds dependencies to the *.csproj file as `<PackageReference />` nodes. The `dotnet bundle` command is registered with the .NET Core CLI only when a `<DotNetCliToolReference />` node is used. Modify the *.csproj file accordingly.
195
-
196
93
## Add files to workflow
197
94
198
95
Consider an example in which an additional *custom.css* file is added resembling the following:
@@ -252,32 +149,7 @@ The following `environment` tag renders the bundled and minified CSS files when
252
149
253
150
There are cases in which an app's bundling and minification workflow requires additional processing. Examples include image optimization, cache busting, and CDN asset processing. To satisfy these requirements, you can convert the bundling and minification workflow to use Gulp.
254
151
255
-
### Use the Bundler & Minifier extension
256
-
257
-
The Visual Studio [Bundler & Minifier](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier) extension handles the conversion to Gulp.
258
-
259
-
> [!NOTE]
260
-
> The Bundler & Minifier extension belongs to a community-driven project on GitHub for which Microsoft provides no support. Issues should be filed [here](https://github.com/madskristensen/BundlerMinifier/issues).
261
-
262
-
Right-click the *bundleconfig.json* file in Solution Explorer and select **Bundler & Minifier** > **Convert To Gulp...**:
263
-
264
-

265
-
266
-
The *gulpfile.js* and *package.json* files are added to the project. The supporting [npm](https://www.npmjs.com/) packages listed in the *package.json* file's `devDependencies` section are installed.
267
-
268
-
Run the following command in the PMC window to install the Gulp CLI as a global dependency:
269
-
270
-
```console
271
-
npm i -g gulp-cli
272
-
```
273
-
274
-
The *gulpfile.js* file reads the *bundleconfig.json* file for the inputs, outputs, and settings.
0 commit comments