Minification Ignored Files Not working #4466 | Support

rafael.gonzales created 2 years ago

ABP Framework version: v7.0.1
UI type: MVC
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): No

Hi,

I wanted to add CSS and JS at the last of the tag but i want to exclude some of them from the minification.

What i did.

Created a ScriptContributor AND StyleContributer in DemoMinification.Web\Bundling

DemoScriptContributor.cs

[DependsOn(typeof(JQueryScriptContributor))]
public class DemoScriptContributor : BundleContributor
{
    public const string DemoScript= "/demo/js/init.js";
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains(DemoScript);
    }
}


    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains(DemoScript);
    }
}

**DemoStyleContributor.cs **

    public class DemoStyleContributor : BundleContributor
    {
        public const string DemoStyle = "/demo/css/init.css";
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains(DemoStyle);
        }
    }

Created a ViewComponent and a Default.cshtml in DemoMinification.Web\Components\DemoJS

**DemoJsViewComponent **

   public class DemoJsViewComponent : AbpViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("/Components/DemoJs/Default.cshtml");
        }
    }

Default.cshtml

@using DemoMinification.Web.Bundling
@*@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling*@

<abp-script type="typeof(DemoScriptContributor)" />

In DemoMinificationWebModule.cs, i added this method to add the CSS Bundle and to add a Hook for the ViewComponent which include the desired JS in the position we want and Populate the MinificationIgnoredFiles List to include those files i want to keep the same (not minified)

The problem is everything is minified and the IgnoredFiles added to the list are not IGNORED from the minification.

What can i do?

I attached a demo solution with the problem.

DemoMinificationWebModule.cs

private void ConfigureDemoBundle()
{
    Configure&lt;AbpBundlingOptions&gt;(options =>
    {
        options
            .StyleBundles
            .Get(StandardBundles.Styles.Global)
            .AddContributors(typeof(DemoStyleContributor));
    });

    Configure&lt;AbpLayoutHookOptions&gt;(options =>
    {
        options.Add(
            LayoutHooks.Head.Last,
            typeof(DemoJsViewComponent)
        );
    });

    Configure&lt;AbpBundlingOptions&gt;(options =>
    {
        options.MinificationIgnoredFiles.Add("/demo/css/init.css");
        options.MinificationIgnoredFiles.Add("/demo/js/init.js");
        options.Mode = BundlingMode.BundleAndMinify;
    });

}

3 Answer(s)

0

liangshiwei created 2 years ago
Support Team Fullstack Developer

Hi,

You can check and share your logs.

It works for me, it will not be minified, but it will still be added to the same bundle file.
0

rafael.gonzales created 2 years ago

How can avoid that behavior? I want all the ignored files exist as a single <link rel="stylesheet"> and not be included in the bundled minificated version.

How is the bootstrap-light and bootstrap-dark (included in LeptonX Pro) excluded from minification and bundling? how can i approach something like this?

Also how can i change my own css from dark and light and being changed in the source code also as bootstrap-dark and bootstrap-light?

Thank you so much!
0

liangshiwei created 2 years ago
Support Team Fullstack Developer

Hi,

How can avoid that behavior? I want all the ignored files exist as a single <link rel="stylesheet"> and not be included in the bundled minificated version.

It's Bundling & Minification system design, you can't avoid it. you should use link tag add them to the page instead of using a bundle.

How is the bootstrap-light and bootstrap-dark (included in LeptonX Pro) excluded from minification and bundling? how can i approach something like this?

You can remove them from bundling, and use HTML tag to add them to page.

Also how can i change my own css from dark and light and being changed in the source code also as bootstrap-dark and bootstrap-light?

You can check the style-initializer.js file. The file path is /Themes/LeptonX/Global/scripts/style-initializer.js.

For more information, see : https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification

1

Have an answer to this question? Log in and write your answer.