CODEWITHSUNDEEP
c#asp.net-corebundle
user2370664
user2370664

Reputation: 423

.NET Core2.0 bundleconfig.json not working

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?

Upvotes: 17

Views: 29755

Answers (11)

An Anita
An Anita

Reputation: 163

Install BuildBundlerMinifier and it will help to create min files

Upvotes: 2

James Skingsley
James Skingsley

Reputation: 11

In addition to the answer given by raddevus above; open the Task Explorer in Visual Studio, expand bundleconfig.json; right click on Update all files and select Binding then After build ... tad-dah!

enter image description here

Upvotes: 1

Gerard
Gerard

Reputation: 2709

Did install the BuildBundlerMinifier.Core version (3.0.415). That did not work, however the not core version of BuildBundlerMinifier (3.0.415) works fine (in a asp.net core 2.2 project).

Upvotes: 2

Abi P
Abi P

Reputation: 1450

The ultimate solution that I did is Removed - <PackageReference Include="BundlerMinifier.Core" Version="2.8.391" />
Added - <PackageReference Include="BuildBundlerMinifier" Version="2.9.406" /> to get it working.

Adding VS extension and enabling the bundle on build step also adds the BuildBundlerMinifier package.

Upvotes: 5

Khushboo Tahir
Khushboo Tahir

Reputation: 667

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.

Upvotes: 18

Ross Brasseaux
Ross Brasseaux

Reputation: 4150

I had this issue today. The key for me was that the nuget package (BuildBundlerMinifier) wasn't enough for this to work. You need to also install the Bundler and Minifier VS extension. From there, you can follow the instructions here to enable bundling on build. Note that the VS extension will also install the nuget package if you do not already have it.

Regarding why this doesn't work out of the box, I believe it is because this is a fairly new 3rd-party tool produced by Mads.

Upvotes: 1

Wagner Pereira
Wagner Pereira

Reputation: 1078

After install VS 2017 Community 2017, version 15.8.9

Bundling & Minifying stop working

Installing in NuGet don't work

So, in Tools menu, Extensions and Updates, after updating Bundling & Minifying, and restarting VS, its go to work

Now, after select bundleconfig.json , right-clicking, in popup menu, its show the item "Bundler & Minified"

Upvotes: 0

Bon
Bon

Reputation: 1091

As per documentation from Microsoft here.

The BuildBundlerMinifier NuGet package enables the execution of bundling and minification at build time.

This got me annoyed at first too because it isn't installed by default and the implication of the bundler seems to be that it should just work built-in. But that is not the case.

Upvotes: 6

raddevus
raddevus

Reputation: 9077

I could not get this working and learned that there is more to the problem at the present time.

By default none of the Bundling & Minifying stuff is installed in a dotnet core razor pages project.

Supposedly, you can can check your settings by right-clicking the bundleconfig.json in Visual Studio Solution Explorer. But that doesn't show anything in my project.

I finally found a Visual Studio Add-in.

Bundler & Minifier -- manual

Instead I installed a manual bundler & minifier -- which is written by the same author (Mads Kristensen) as the Nuget pkg from above. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

That's a Visual Studio extension and after you install it, you can right-click any css or js file and you'll get menu which allows you to minify them "manually". bundle file

Enable bundle on build...

That option will warn you that it is going to install a Nuget package. I didn't do that yet.

I also unchecked that option [Produce Output Files] and then selected it again (checked) and when I did that another file was created in my solution underneath the bundleconfig.json named bundleconfig.json.bindings. That file contains just one line:

produceoutput=true

It's odd that it wasn't there previously. I know that file didn't exist previously, because git told me there are untracked files and mentioned that file.

To test if there is a problem in studio or something, I created a brand new dotnet Core 2.x Razor Pages project, then immediately deleted the min.css and tried to build it again but it woudln't ever build again.

Update All Bundles I built again after the .bindings file was added, but the bundles still weren't built. I then noticed that I have another option under the [Build] menu but I'm not sure if that is the Bundling & Minifying plugin I installed so you'll have to consider that when looking for this solution.

update all bundles

You can also check your settings in the Visual Studio [Tools...Options...] menu:

Tools and Options You can see that the Bundler & Minifier has the Product Output files option set to true in my project (even though it still isn't working).

Actually, I read that bottom sentence a little more closely and I noticed that it says, "actively listens to input file changes" so I went and changed my site.css and noticed that the value was indeed updated in the site.css.

Make A Change, Change It Back

The odd thing is when / if you delete your site.min.css then it doesn't seem to get regenerated at any time. I guess now if you do that, you could make a change and change it back and the min file would be created.

I tested that: deleted site.min.css then made a change and the file was gen'd again. It's just odd that the build doesn't fire this functionality.

Upvotes: 12

Sterling Diaz
Sterling Diaz

Reputation: 3875

The problem is not using wwwroot in your path. The problem is that you are using the ~ notation before wwwroot, and that tells the browser to use the root path (wwwroot) and the what follows your path, which is also wwwroot.

You can use the absolute path 

"inputFiles": [
      "wwwroot/css/site.css"
    ]

Or the relative path

 "inputFiles": 
      "~/css/site.css"
    ]

Both not the too at the same time, because the relative path complement the full path with the ~ or ../ notation.

Another observation on your scripts. Why the heck do you keep the files apart? The purpose of the bundle is that you don't have to include each separate file. It combines them in one minified file and make less request to the server to load the pages. Don't keep the datatables scripts separate from your scripts.

Instead of:

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

Your should put:

{
    "outputFileName": "wwwroot/css/myStyles.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
      "wwwroot/lib/jquery/jquery-datatables/datatables.css",
      "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css"
    ]
  }

Upvotes: 4

Oli
Oli

Reputation: 167

You have to remove the "wwwroot" part in the urls. "wwwroot" is the root folder where your application is running. Now it will search the files in "...wwwroot/wwwroot/js..." instead of "...wwwroot/js...".

Upvotes: 6

Related Questions