How to use Bundleconfig in Asp.net Core

In this tutorial, we learn how to use bundleconfig in Asp.net Core, bundling and minification technique in .net core.

In earlier version of Asp.net we had a BundleConfig.cs file with a static RegisterBundles method, where we could add any additional files for bundling and minification.

services.AddWebOptimizer();

Bundling and minification in ASP.NET Core: In .net Core there is no BundleConfig.cs file, instead there is a BundleConfig.json, a plain text file, which works very differently.

When you create a new Asp.net Core project a bundleconfig.json file automatically added to project

This is how the default file look like!

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

inputFiles : takes comma separated name of all the files, here is an example how you can add multiple file in that array.

          "inputFiles": [
      "wwwroot/js/site.js",
        "wwwroot/js/user.js",
          "wwwroot/js/product.js",
    ]
      

There are many tools for bundling and minification in ASP.NET Core, There some tools are from open source technologies and some are developed by Microsoft.

• BundlerMinifier
  BundlerMinifier is the first choice for ASP.NET Core application for bundling and minification, read more about this Utility. It has following features

  • Bundle CSS, JavaScript or HTML files into a single output file
  • Supports MSBuild for CI scenarios
  • Supports Command line
  • Minify individual or bundled CSS, JavaScript and HTML files
  You can install BundlerMinifier.Core using NuGet.
  

• WebOptimizer WebOptimizer is an ASP.NET Core middleware for bundling and minification of JavaScript, CSS files at runtime

  // in configureServices() method 
  services.AddWebOptimizer();
  
  // in Configure() method
  app.UseWebOptimizer();
  app.UseStaticFiles();

  install WebOptimizer.Core using NuGet
• Gulp
  Gulp is a JavaScript task runner which can automate many common tasks of a website like minification, checking js errors, bundling of various js and CSS files, optimizes images etc.
  Here is a nice article on How to Use Gulp in ASP.NET Core