How to use bundling and minification with .NET 5 & Umbraco V9
This worked well, and made managing these items quick and easy.
In .NET 5+ the
BuildBundlerMinifier is no longer available, instead we need to generate these files another way, I personally use gulp for this.
A quick start for this, is to install the Bundler & Minifier Visual Studio extension, once you have installed this extension restart Visual Studio.
Next create a file called
bundleconfig.json in the root of your web project, and paste in the following code (replacing the links to the assets to your own):
Right click on the
bundleconfig.json file, then hover over Bundler & Minifier, and then click on the Convert to Gulp option
This will create a
gulpfile.js, you can now remove the Bundler & Minifier Visual Studio extension.
Before you can create the minified files with gulp, you will need to install the packages with the following command:
You can now run the following command to build the minified files:
At this point I recommend excluding the minified files from your source control by adding the following line to your
Next you can clean up the
bundleconfig.json file created earlier by removing the
To configure your views to use the new files you will need to use the BundlerMinifier.TagHelpers which can be installed with the following NuGet package:
dotnet add package BundlerMinifier.TagHelpers
You will want to enable the cache busting querystring, you can do this by adding the following to the
options.AppendVersion = true;
Once installed you will need to add the following line to your _ViewImports.cshtml file to make the tag helper accessible:
@addTagHelper *, BundlerMinifier.TagHelpers
Finally in your views containing the links to your css and scripts files, you can replace them with the following:
<bundle name="wwwroot/bundles/site.min.css" />
When you are in debug mode it will generate seperate links to your files:
<link href="/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="/css/site.css" rel="stylesheet" />
When your running in release mode it will bundle your assets and append a cachebusting querystring:
<link href="/bundles/site.min.css?v=Hr2K_e4FFmONl0h--fZbjZJrI6JwyQ7kHuXgHE85RxM" rel="stylesheet" />