Menu
I'm struggling trying to get bundling to work in a Core 2.0 web application. I have the following in my bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/css/bootstrap.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
]
},
{
"outputFileName": "wwwroot/css/jquery-datatables.min.css",
"inputFiles": [
"wwwroot/lib/jquery/jquery-datatables/datatables.css",
"wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
},
{
"outputFileName": "wwwroot/js/jquery.min.js",
"inputFiles": [
"wwwroot/lib/jquery/dist/jquery.js",
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
},
{
"outputFileName": "wwwroot/js/bootstrap.min.js",
"inputFiles": [
"wwwroot/lib/bootstrap/dist/js/bootstrap.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
},
{
"outputFileName": "wwwroot/js/jquery-datatables.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery-datatables/datatables.js",
"wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/js/dataTables.responsive.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
I installed the BuildBundlerMinifier NugGet package. When I build the project i see the bundleconfig.json file being processed.
I added the following to _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<environment include="Development,Staging,Production">
<link rel="stylesheet" href="~/wwwroot/css/site.min.css" />
<link rel="stylesheet" href="~/wwwroot/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/wwwroot/css/jquery-datatables.min.css" />
</environment>
</head>
<body>
<environment include="Development,Staging,Production">
<script src="~/wwwroot/js/site.min.js"></script>
<script src="~/wwwroot/js/jquery.min.js"></script>
<script src="~/wwwroot/js/bootstrap.min.js"></script>
<script src="~/wwwroot/js/jquery-datatables.min.js"></script>
</environment>
@RenderSection("Scripts", required: true)
</body>
When I run the application the resources aren't loaded. I'm getting the following errors:
Loading failed for the
<script>with source “https://localhost:44301/wwwroot/js/site.min.js”.
Loading failed for the<script>with source “https://localhost:44301/wwwroot/js/jquery.min.js”.
Loading failed for the<script>with source “https://localhost:44301/wwwroot/js/bootstrap.min.js”.
Loading failed for the<script>with source “https://localhost:44301/wwwroot/js/jquery-datatables.min.js”
Can someone please help me?
867
You can run the bundler on all bundleconfig. json files in the solution by using the keyboard shortcut Shift+Alt+i or by using the button on the top level Build menu.
The new ASP.NET Core project templates in Visual Studio provide a solution for bundling and minification using a JSON configuration file called bundleconfig. json. There are also some NuGet Packages and Visual Studio extensions that can help us in bundling and minification.
In Task runner right-click or double click on update all files; after doing this your output file mentioned in bundleconfig,json will be created in a mentioned path as shown below. Output will be a file created like this if not please reload your project once. Add CSS and JS file to your . cshtml page or _layout page.
I tired it for Nuget Package Manager but it didn't work, then uninstall that ,
Solved with:
open Nuget Package Manager console,
Install-Package BuildBundlerMinifier -Version 2.8.391
and Rebuild solution again. it works for me.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
