Sitefinity Bundling and Minification (JS and CSS Files )

Imran Khan A

Rate me:

0.00/5 (No votes)

25 Aug 2017CPOL

7.8K

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:

XML

<%@ 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.

XML

<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:

XML

    <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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Imran Khan A

Software Developer Softway Solutions Pvt Ltd

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.