(untagged)

Sitefinity Bundling and Minification (JS and CSS Files )

Imran Khan A

0.00/5 (No votes)

25 Aug 2017

In this article, I have explained how to to Bundle and Minify the external script files and CSS files

Introduction

This article is about the Bundling and Minification of the JavaScript files and CSS files in Sitefinity CMS.

Using the Code

How to minify files in Non Feather and Feather Sitefinity Projects

Note

Feather Projects should start from Step 3

Step 1

Open your Default.Master file inside Sitefinity WebSite Templates folder:

(Path of the Folder: SitefinityWebApp -> App_Data -> Sitefinity -> WebsiteTemplates -> Project Folder -> App_Master -> Default.Master

The Stylesheets files are placed inside App_Themes -> Project Sample -> Global.

The Js files are placed inside Common -> Js.

Step 2

Refer your CSS and JS files as mentioned below:

<%@ Master Language="C#" AutoEventWireup="true" 

CodeBehind="Default.master.cs" Inherits="SitefinityWebApp.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
     <title> Project Title </title>
    <meta name="viewport" 

    content="width=device-width, initial-scale=1, user-scalable=no" />
</head>

<body>
    <form id="form1" runat="server">
    <div>
       
          <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" 

          runat="server" EnableStyleSheetCombine="true">
            <StyleSheets>
                <telerik:StyleSheetReference 

                Path="../App_Themes/SampleProject/Global/common.js" />
                <telerik:StyleSheetReference 

                Path="../App_Themes/SampleProject/Global/owlcarousal.js" />
                <telerik:StyleSheetReference 

                Path="../App_Themes/SampleProject/Global/project.min.js" />
            </StyleSheets>
        </telerik:RadStyleSheetManager>
        
           <telerik:RadScriptManager ID="RadScriptManager1" 

           runat="server" EnableScriptCobine="true">
            <Scripts>
                <telerik:RadScriptReference  Path="../../../../../Common/common.js"/>
                <telerik:RadScriptReference Path="../../../../../Common/owlcarousal.js" />
                <telerik:RadScriptReference Path="../../../../../Common/project.min.js" />
            </Scripts>
        </telerik:RadScriptManager>
   
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Step 3

Open Web.Config file in your project. Add keys to the appsettings tag. The value should refer the CSS and JS files folder.

<configuration>
    <appSettings>
      <add key="Telerik.Web.UI.ScriptsFolder" 

      value="~/Common/;"/>
      <add key="Telerik.Web.UI.StyleSheetFolders" 

      value="~/App_Themes/SampleProject/Global/;" />
    </appSettings>
</configuration>

Step 4

RadScriptManager needs the HttpHandler to be registered in the application's configuration file.

For registering the HttpHandler for website, you can use the following code:

    <add path="Telerik.Web.UI.WebResource.axd" 

verb="*" type="Telerik.Web.UI.WebResource" validate="false" />

Step 5

Now build and run your project. Open the page on your browser. Right click your page and select Inspect element and see the nework tab.

All your CSS files and JS files will combine as the following one file:

<link href="/Telerik.Web.UI.WebResource.axd?

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here