Web.Optimization allows you to transform LESS and CoffeeScript files by making use of the upcoming bundling and minification features.
- Get the packages via NuGet
- Clone or download the code from GitHub => Build the solution => Add references to your project.
protected void Application_Start()
{
// ...
// Register CoffeeScript files
var scripts = new Bundle(
"~/Content/coffee",
new CoffeeScriptTransform().Then(new JsMinify()));
instance.Include(
"~/Scripts/first.coffee",
"~/Scripts/second.coffee",
"~/Scripts/third.coffee");
BundleTable.Bundles.Add(scripts);
// Register LESS files
var styles = new Bundle(
"~/Content/less",
new LessTransform().Then(new CssMinify()));
styles.Include(
"~/Content/first.less",
"~/Content/second.less",
"~/Content/third.less");
BundleTable.Bundles.Add(styles);
}
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
// CoffeeScript
bundles.Add(new CoffeeScriptBundle("~/bundles/coffee")
.Include("~/Scripts/first.coffee")
.Include("~/Scripts/second.coffee")
.Include("~/Scripts/third.coffee")
);
// LESS
bundles.Add(new LessStyleBundle("~/Conetnet/less")
.Include("~/Scripts/first.less")
.Include("~/Scripts/second.less")
.Include("~/Scripts/third.less")
);
// Sass
bundles.Add(new SassStyleBundle("~/Conetnet/less")
.Include("~/Scripts/first.Sass")
.Include("~/Scripts/second.Sass")
.Include("~/Scripts/third.Sass")
);
// Combined CoffeeScript and JS
bundles.Add(new CombinedCoffeeScriptBundle("~/Conetnet/combined")
.Include("~/Scripts/first.coffee")
.Include("~/Scripts/second.js")
.Include("~/Scripts/third.coffee")
);
}Web.Optimization contains a ConfigurationSection, which allows you to register all your bundles in the web.config:
<configSections>
<section name="web.optimization" type="Web.Optimization.Configuration.OptimizationSection" />
</configSections>
<web.optimization>
<bundles>
<bundle virtualPath="~/Content/js" transform="System.Web.Optimization.JsMinify, System.Web.Optimization">
<content>
<!-- Add some single files -->
<add path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" />
<add path="~/Scripts/forms.js" />
<add path="~/Scripts/validation.js" />
<!-- Add a directory (and its subdirectories) -->
<add path="~/Content/Scripts/Plugins" searchPattern="*.js" searchSubdirectories="true" />
</content>
</bundle>
</bundles>
</web.optimization>
You could also apply multiple transformations:
<web.optimization>
<bundles>
<bundle virtualPath="~/Content/coffee">
<content>
<add path="~/Scripts/script1.coffee" />
</content>
<transformations>
<add type="Web.Optimization.Bundles.CoffeeScript.CoffeeScriptTransform, Web.Optimization.Bundles.CoffeeScript" />
<add type="Web.Optimization.Bundles.YUI.YuiJsMinify, Web.Optimization.Bundles.YUI" />
</transformations>
</bundle>
</bundles>
</web.optimization>
After the registration is done, you have to tell your application to use bundles from your configuration:
protected void Application_Start()
{
// ...
BundleTable.Bundles.EnableConfigurationBundles();
}
<head>
<meta charset="utf-8" />
<!-- ... -->
@Html.RenderBundle("~/Content/style")
</head>