how to bundle css and js - Razor

Bo Jacobsen 608 posts 2406 karma points

Oct 11, 2015 @ 13:46

How to bundle .css and .js using System.Web.Optimization?

Hello everyone.

I want to be able to use @Scripts.Render("~/Script/js") and @Styles.Render("~/Content/css")

After some research i came up with this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using Umbraco.Core;

namespace MySolution.App_Code
{
    public class CustomEventHandler : IApplicationEventHandler
    {
        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            RegisterStyles(BundleTable.Bundles);
            RegisterJavascript(BundleTable.Bundles);
        }

        private static void RegisterStyles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/styles").Include(
                    "~/css/*.css"
                )
            );
        }

        private static void RegisterJavascript(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Script/js").Include(
                    "~/scripts/jquery/*.js"
                )
            );
        }
    }
}

1) Now System.Web.Optimization couldn't be found.

2) Then i used : PM> Install-Package Microsoft.AspNet.Web.Optimization

3) Now i got no errors in my built. BUT...

4) Then i got a Newtonsoft.Json assembly error referance.

WRN : Logging assemblybinding is disabled .
Logging assemblybindingserror activated by setting the registry value [ HKLM \ Software \ Microsoft \ Fusion ! EnableLog ] ( DWORD ) at 1.
Note The performance impaired by logging assemblybindingserror .
This function is disabled by removing the registry value [ HKLM \ Software \ Microsoft \ Fusion ! EnableLog ] .

I hope someone can help.

Copy Link

David Brendel 792 posts 2970 karma points MVP 3x c-trib

Oct 11, 2015 @ 17:56

Not a real answer for your question but I Bad really good experience using Optimus package for bundling of CSS and JS files.

Maybe that helps.

Regards David

Copy Link

Bo Jacobsen 608 posts 2406 karma points

Oct 12, 2015 @ 07:02

I prefer to be able to make my own simple bundle code ;-)

Regards Bo

Edited: After a whole day trying to sholve the problem. My Umbraco Build now has 100 warnings and 2 errors. So my feelings for umbraco is at a very low place.

But i got the Logging assemblybindingserror activated. Its just told me that there was 2 assembly referances of Newtonsoft.Json. But i could only find one.

Copy Link

Bo Jacobsen 608 posts 2406 karma points

Oct 13, 2015 @ 19:00

I finally managed to get it to work.

Start a new empty asp.net project.
Installing Microsoft ASP.NET Web Optimization & WebActivtor in PackageManager.
Installing Umbraco via Package Manager PM> Install-Package UmbracoCms
Adding a new folder in the solution, i called it helpers. You can name it whatever you like.
Add a new class.cs in the new folder, i named it CustomEventHandler.cs. You can name it whatever you like.

CustomHandlerEvent.cs

using System.Web.Optimization;
using Umbraco.Core;

namespace MySolution.helpers
{
public class CustomEventHandler : IApplicationEventHandler
 {
        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 
        { }
        public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 
        { }
        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            RegisterStyles(BundleTable.Bundles);
            RegisterJavascript(BundleTable.Bundles);
        }
        private static void RegisterStyles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/bundle/styles.css").Include(
                    "~/css/*.css"
                )
            );
        }
        private static void RegisterJavascript(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundle/javascript.js").Include(
                    "~/scripts/jquery/*.js",
                    "~/scripts/*.js"
                )
            );
        }
    }
}

Now you can use @Scripts.Render() and @Styles.Render in your .cshtml file.

Layout.cshtml

@using System.Web.Optimization
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<!DOCTYPE html>
<html>
<head>
    // Cleared for clarification
    @Styles.Render("~/bundle/styles.css")
</head>
<body>
    // Cleared for clarification
    @Scripts.Render("~/bundle/javascript.js")
</body>
</html>

Copy Link

Bo Jacobsen 608 posts 2406 karma points

Oct 13, 2015 @ 19:28

Adding Bundles Directly

Taken from step 4 in my former reply.

This time add a class file called BundleConfig.cs

BundleConfig.cs

using System.Web.Optimization;

namespace MySolution.helpers
{
  public static class BundleConfig
  {
    public static void RegisterBundles()
    {
        BundleTable.Bundles.Add(new Bundle("~/bundle/javascript.js").Include(
            "~/scripts/jquery/*.js",
            "~/scripts/*.js"
                        ));


        BundleTable.Bundles.Add(new Bundle("~/bundle/styles.css").Include(
            "~/css/*.css"
                        ));

        BundleTable.EnableOptimizations = true;
    }
  }
}

Now find your AssemblyInfo.cs. Its under Solution -> Properties -> AssemblyInfo.cs.

Add in the top after the other usings.

using MySolution.helpers;
using WebActivatorEx;

[assembly: PostApplicationStartMethod(typeof(BundleConfig), "RegisterBundles")]

Now you can use @Scripts.Render() and @Styles.Render in your .cshtml file.

Copy Link

Biagio Paruolo 1619 posts 1912 karma points c-trib

Jul 21, 2016 @ 07:42

Other info here http://churchley.net/blog/2015/bundling-minifying-umbraco-fanoe-starter-kit/ and here https://gist.github.com/jkarsrud/5143239

Copy Link

Romix2017 23 posts 183 karma points

Oct 11, 2017 @ 10:39

using Umbraco.Core;

using System.Web.Optimization; namespace Anturaz_new.EventHandlers { public class RegisterBundlesHandler: Umbraco.Core.ApplicationEventHandler

{

protected override void ApplicationStarted(UmbracoApplicationBase

umbracoApplication, ApplicationContext applicationContext) { BundleConfig.RegisterBundles(BundleTable.Bundles); }

}

Copy Link

is working on a reply...

Flag this post as spam?

How to bundle .css and .js using System.Web.Optimization?