Combining external scripts and css in one file (Bundling and Minification) in Sitefinity

In this article we have tried bundling and minifying our scripts and CSS  in a Sitefinity project using Telerik's "RadStyleSheetManager" and "RadScriptManager" with a very simple example. Following are the few steps we need to follow for the purpose.

Step-1è

Add below scripts for it will not conflict with other versions, Make sure you include this snippet before you include jQuery UI.

    <script type="text/javascript">

         window.jQuery = window.$ = $telerik.$;
    </script>

Step-2è add below code in your master page

for “StyleSheet” you can use  “RadStyleSheetManager”  and for javascript you can use  RadScriptManager

<form id="form1" runat="server" autocomplete="off">

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true">
    <StyleSheets>
        <telerik:StyleSheetReference Path="/Common/css/styles.css" />
        <telerik:StyleSheetReference Path="/Common/css/responsive.css" />
        <telerik:StyleSheetReference Path="/Common/css/jquery.fullPage.css" />
        <telerik:StyleSheetReference Path="/Common/css/gallery-grid.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"   EnableScriptCombine="true">

    <Scripts>
         <telerik:RadScriptReference  Path="/Common/js/jquery.js" />
        <telerik:RadScriptReference  Path="/Common/js/bootstrap.js" />
         <telerik:RadScriptReference Path="/Common/js/masonry.pkgd.js" />
         <telerik:RadScriptReference Path="/Common/js/jquery.nicescroll.js" />
         <telerik:RadScriptReference Path="/Common/js/spritespin.js" />
         <telerik:RadScriptReference Path="/Common/js/jquery-ui.js" />
         <telerik:RadScriptReference Path="/Common/js/venobox.js" />
         <telerik:RadScriptReference Path="/Common/js/owl.carousel.js" />
         <telerik:RadScriptReference Path="/Common/js/jquery.mousewheel.js" />
         <telerik:RadScriptReference Path="/Common/js/slick.js" />
         <telerik:RadScriptReference Path="/Common/js/video-player.js" />
         <telerik:RadScriptReference Path="/Common/js/jquery.ui.slider-rtl.js" />
         <telerik:RadScriptReference Path="/Common/js/magnify.js" />
         <telerik:RadScriptReference Path="/Common/js/jquery.fullPage.js" />
         <telerik:RadScriptReference Path="/Common/js/default.js" />
         <telerik:RadScriptReference Path="/Common/js/Validator.js" />
    </Scripts>
</telerik:RadScriptManager>
    </form>

As seen in the below image as well.

Step-3è Add below two keys in your web.config file 

We need to put our CSS and Js folder path in the following key's  value.

<configuration>

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

as shown below.

Step-4è  

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

For Registering the HttpHandler for Website you can use following code.


<add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource" validate="false" />

we needs to place the code as shown below.

Step-5è

To check whether you performed the steps successfully. open the page on your browser Right click your page and select view page source.

Your all css files will combine as the following one file.

Your all JavaScript files will combine as the following one file.