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?
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.
