Wednesday, January 8, 2014

Bundles implementation for MVC 3 by Cassette

Benefits-

http://getcassette.net/benefits
as per site:

Improve your website’s Y-Slow score

A faster website means happier users and can even improve your business’s bottom line. Cassette combines and minifies your assets into bundles. This results in fewer HTTP requests, reducing page load time. 
Cassette bundles are served using the right HTTP caching headers and compressed to ensure optimal client download performance.
Bundle URLs include a hash of the contents, so a changed file results in a new URL. Your users will never have to clear their browser cache again.

Organize your application, your way

Cassette’s flexible configuration system lets you decide how to structure your assets. Use the simple, code-based API to define bundles by convention.
The bundle processing pipeline is fully customizable. It provides full control over how bundles are combined, minified and rendered.

Create cleaner code, faster

Use your favourite awesome languages - CoffeeScript, LESS and Sass. Cassette will compile these into JavaScript and CSS.

Automagic asset ordering

Don’t waste time maintaining that ever-growing file of scripts listed in the right order. Be explicit about each file's dependencies with handy reference comments, and let Cassette determine the correct order for you.
Alternatively, Cassette does offer a simple file format to explicitly order assets.

Simple “in-page” API

Reference the bundles your page view or partial requires using the simple Bundles helper class. Then tell Cassette where to render the HTML. It will generate all the script and link elements for you.
If you reference one bundle that requires another, Cassette knows to include both bundles in the generated HTML.

Easy Debugging & Production Performance

Debug your original JavaScript files - much easier than trying to debug a minified monster! Proper filenames and line numbers let you find and fix problems faster. In debug-mode Cassette puts each source asset into the page individually.
With a single configuration change for production deployment, Cassette will generate the optimized bundle includes instead. This requires absolutely no manual changes to your page source.

Manageable HTML Templates

Embedding HTML templates directly within a page is messy. Keeping each template in its own file makes projects much simpler to maintain. Let Cassette handle the embedding for you.
Cassette can pre-compile the HTML templates into JavaScript for even faster client-side load times.

by installing Cassette package through Nuget that bundle concept can be implemented, site like:
http://getcassette.net/
 
 

1.Open – tool- library package manager – package manager console

          2. execute following statements to install cassettee-


Install-Package Cassette.Less

Install-Package Cassette.Sass

Install-Package Cassette.CoffeeScript

create a class in your project can be named-                      3.CassetteConfiguration name space as the main project


in the class:


4.using Cassette;


using Cassette.Scripts;


using Cassette.Stylesheets;






public class CassetteConfiguration


{


public void Configure(BundleCollection bundles)


{


bundles.Add<StylesheetBundle>("Content", bundle => bundle.EmbedImages());


bundles.AddPerSubDirectory<ScriptBundle>("Scripts");


}


}






Previous case not runnign new implementation:

WORKING: http://www.arroyocode.com/asset-and-bundling-management-in-asp-net-mvc-3

Execute following stetment for mvc 3

1. Install-Package Cassette.Web

web.config in View folder you can find - <add namespace="Cassette.Views" /> which will register the namespace
Follow step 3 and 4  as previous.
In _Layout.cshtml
put that at top of the page to load required css and scripts :

@{
    Bundles.Reference("Content/Site.css");
    Bundles.Reference("Scripts/modernizr-2.5.3.js", "headerScripts");
    Bundles.Reference("Scripts/jquery-1.7.1.js", "footerScripts");
}
for asp.net forms:
<% Cassette.Views.Bundles.Reference("Content/Site.css"); %>

IN head to load css:
@Bundles.RenderStylesheets()
for asp.net forms:
<%: Cassette.Views.Bundles.RenderStylesheets() %> 


In required location:
@Bundles.RenderScripts("headerScripts")
or
 @Bundles.RenderScripts("footerScripts")

to render the content on the page


No comments:

Post a Comment