How to use Bundler & Minifier tool in Visual Studio 2015

Question

Recently, I use ASP.NET Core to develop my project. I have a question like that: there is many css and js file I want refer in my View page, so If it is exist a tool that can combine some css or js to one. It is like following

<link href="~/Content/css/a1.css" rel="stylesheet" asp-append-version="true" />
<link href="~/Content/css/a2.css" rel="stylesheet" asp-append-version="true" />

I want to te result is that:

<link href="~/bundles/css/a.min.css" rel="stylesheet" asp-append-version="true" />

Then I search it on Google, I got the tool Bundler& Minifier, an extension in Visual Studio. I want to know how to write the bundleconfig.json file in my project? and how to use it to combine the css or js file?

Answer 1

There are number of ways you can use Bundler & Minifier in asp.net core project. Most common is using BundlerMinifier.Core tool

To use BundlerMinifier.Core tool, simply add a reference to BundlerMinifier.Core within the tools section of your existing project.json file as seen below :

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

After adding the tool, you'll need to add a bundleconfig.json file in your project that will be used to configure the files that you wish to include within your bundles. A minimal configuration can be seen below :

[
  {
    "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
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

After your bundles have been configured, you can bundle and minify your existing files via the following command :

dotnet bundle

There is also a Bundler & Minifier extension available for Visual Studio which will help you to bundle and minify your files.