Free Web Development Online Tutorials, Learn to Code
Bundleconfig in Asp.net Core, Learn Asp.net Core, Free Asp.net Core Tutorial for Beginners

Bundleconfig in Asp.net Core

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

Asp.net Core Bundleconfig

Bundling and minification in ASP.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, but 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",
    ]
      

External utility for bundling and minification in Asp.Net Core

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.

Here we show how to work with few of them
BundlerMinifier, WebOptimizer, Webpack, Gulp
  • 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
 
How to add bundleconfig in Asp.net Core
ASP.NET MVC Interview Questions Answers

online courses
Asp.Net Core C# Examples | Join Asp.Net MVC Course