.net core weboptimizer not creating a bundle

Question

I'm trying to use https://github.com/ligershark/WebOptimizer as suggested by microsoft in order to bundle and minimise my js files, so following the instructions, I have the following in my startup.cs:

app.UseWebOptimizer();
app.UseStaticFiles();

and in my service configuration (startup.cs):

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddJavaScriptBundle("/js/site.js",     // I have tried using MinifyJsFiles (without the use content root) instead of AddJavaScriptBundle
        "/lib/jquery-ui-1.13.1.custom/jquery-ui.js",
        "/js/auto-complete.js")
      .UseContentRoot();

    pipeline.MinifyJsFiles(); // I have tried with and without this line
});

and in my _layout:

<script src="~/js/site.js"></script>

But whenever I browse to the page, I'm just getting a 404 error in the network tab when it tries to load the site.js

Is there something I have missed? All the files are in their correct places in the wwwroot folder of the site

Contrivance

Hi @Pete, what's the version of asp.net core and WebOptimizer you use? – Pytlik

Hi @Pytlik .net5 and weboptimizer.core 3.0.357 – Contrivance

Hi @Pete, I have tested and it works fine. Try to clear the cookie in browser then to see if any changes. – Pytlik

Here the same issue.. .net5.. all the static files are in wwwroot/css or wwwroot/js.. already tried with/without UseContentRoot().. the path with "/js/test.js" or "js/test.js".. Startup => app.UseWebOptimizer(); app.UseStaticFiles(); services.AddWebOptimizer(pipeline => ...);.. but nothing builded.. have some logs to take a look? – Briggs

@SamueleCarassai I couldn't get it to work so I ended up using this visual studio extension - really easy to use. You just have to remember to exclude all your input files from the build and include your minified file – Contrivance

Same issue here.. #weboptimizer not creating .min files – Preparedness

Followed the README and I have the same issue. The output says File '/Themes/Default/Site.Screen.css' not found. Passing on to next middleware. What "Build action" should be used? D'ont know what's wrong. – Whiggism

@Contrivance I needed to install via VS Extension handler and searched and found; Bundler & Minifier 2022+ – Spiritism

Answer 1

Verify these:

Your files should be somewhere inside the wwwroot directory (if using default configuration)

Your files should use the "Build Action = Content" (there should be nothing in csproj).

When you write:

pipeline.AddSomethingBundle();

A file at wwwroot/main.css will be available at url /main.css.

And when you write:

pipeline.AddSomethingBundle("/site.css", "site.css");

It will require a file to be at location wwwroot/site.css.

Whiggism

Answer 2

Using .UseContentRoot() will make any params (other than the first param, which is a in-memory-only path to a virtual JS bundle) relative to the content root of the .csproj in which the JS files reside.

The content root is generally the root directory of .csproj (Web) project in which the web files reside e.g. containing wwwroot, Controllers, Models, Views, etc.

The normal behaviour is for the file paths / globs to be relative to the wwwroot sub-folder of the content root.

So, if the JS files are in wwwroot, and the .UserContentRoot() call has been made, then we must refer to them relative to the root of your .csproj i.e.

pipeline.AddJavaScriptBundle("/js/site.js",
    "wwwroot/lib/jquery-ui-1.13.1.custom/jquery-ui.js",
    "wwwroot/js/auto-complete.js").UseContentRoot();

which works (on my computer, lol).

All we would need to do then, if we wanted to reference something outside of wwwroot would be to adjust the paths relative to the content root. e.g.

pipeline.AddJavaScriptBundle("/js/site.js",
    "lib/jquery-ui-1.13.1.custom/jquery-ui.js",
    "node_modules/auto-complete/js/auto-complete.js").UseContentRoot();

It may be worth nothing again that the first URL/param is an virtual (i.e. doesn’t exists as a file) absolute path from the root of your web site (so you should refer to that as absolute path in your <script> tag).

And, that the subsequent URLs/params are relative to either wwwroot (by default) or the content root (probably the root of your Web .csproj).

re: pipeline.MinifyJsFiles();

My best understanding is that this line is not needed, as the default behaviour when bundling will be to minify all files in the bundle.

Rather, this call is used when we want to explicitly tell the pipeline to minify a certain list of individual JS files. Then, when we reference those individual JS files directly in a <script> tag, the response we receive should be the minified version.

Nerty