ASP.NET Core Bundle and Minify CSS and JS

the BuildBundlerMinifier package and bundleconfig.json

I love how transparent and easy it is to bundle and minify CSS and JS in an ASP.NET Core Web Application. The BuildBundlerMinifier Package handles the bundling and minification at build time. And, if you want to extend the .NET Core CLI by adding the BundlerMinifier.Core package, you can use the dotnet bundle command to clean, bundle, and watch files from the command line ad hoc. If you're new to bundling and minification, here is a quick tutorial.

Create an Empty ASP.NET Core Web Project

We don't need to add any code, but we do need to create an ASP.NET Core Web Project to understand bundling and minification. Using the .NET Core CLI, let's create a solution and an empty ASP.NET Core Web Project and add the web project to the solution.

$ dotnet new sln -o BundleOfJoy
The template "Solution File" was created successfully.

$ cd BundleOfJoy

$ dotnet new web -o Web
The template "ASP.NET Core Empty" was created successfully.
...

$ dotnet sln add Web/Web.csproj
Project 'Web/Web.csproj' added to the solution.

Just to make sure all is well, let's build the web project. It should compile with no errors.

$ cd Web

$ dotnet build
...
Build succeeded.
    0 Warning(s)
    0 Error(s)

Time Elapsed 00:00:03.00

BuildBundlerMinifier Package

From within the Web project directory, add the BuildBundlerMinifier Package.

$ dotnet add package BuildBundlerMinifier

If you take a peek in your Web.csproj file, you will see the package reference to BuildBundlerMinifier. The version number may be different depending on when you add the package.

$ cat Web.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="BuildBundlerMinifier" Version="2.8.391" />
    <PackageReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>

</Project>

bundleconfig.json

A JSON file, called bundleconfig.json, contains the information about what files to bundle and minify. Create a bundleconfig.json file at the root of the Web project. You can see an example below. In my example, I have two css files, main.css and custom.css, and two js files, util.js and main.js. These will be bundled and minified into two files, main.min.css and main.min.js, respectively. You can play around with these settings, and as you can see, the bundleconfig.json file is really intuitive.

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

We've done a lot from the command line, so here is a visual of the solution in JetBrains Rider.

Minify and Bundle in ASP.NET Core Web Application

dotnet build

Bundling and minification will occur when you build your project. From the Web directory, run dotnet build.

$ dotnet build

...
Bundler: Begin processing bundleconfig.json
    Minified wwwroot/css/main.min.css
    Minified wwwroot/js/main.min.js
Bundler: Done processing bundleconfig.json

You can see the two new bundled and minified files in your project.

dotnet bundle in ASP.NET Core

Slick! Now everytime you build your ASP.NET Core Web App your CS and JS files will be bundled and minified.