Improve System.Web.Optimization.Bundle
Add method to get relative path to files in bundle ("~/Scripts/file.js"). In particular it could be path, used when bundle was created (bundle.AddFile("~/Scripts/file.js"). New method very similar to System.Web.Optimization.Bundle.EnumerateFiles()
The purpose of new method (let's say "IEnumerable<string> GetFilesPath()") is changing HTML output when application in "debug" mode (the "debug" property value of the <compilation> element of the web.config file is "true"):
@helper JsBundle(string bundleUrl) {
if(HttpContext.Current.IsDebuggingEnabled) {
foreach(string filePath in BundleTable.Bundles.GetBundleFor(bundleUrl).GetFilesPath()) {
<script src="@filePath" type="text/javascript"></script>
}
}
else {
<script src="@BundleTable.Bundles.ResolveBundleUrl(bundleUrl)" type="text/javascript"></script>
}
}
resnyanskiy
shared this idea
fixed with debug/release support in RTM – enabled via the script helper functions Scripts.Render and Styles.Render
3 comments
-
I've moved this to http://aspnetoptimization.codeplex.com/workitem/8 so that our team can more easily track
-
Hi - actually, in the version of bundling that we're planning to release pretty soon, we're doing something similar.
Bundles will still be declared and configured like normal. For views, however, we’ve now added an asset manager that is capable of building up the list bundles or regular script/css assets that you need in your page and then rendering links. This will provide much better support for the debug/release scenario that you describe. For example, you would have code like this in your view:
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@{
//all of these are bundles
Assets.AddStyle("~/Content/css");
Assets.AddStyle("~/Content/themes/base/css");
Assets.AddScript("~/Scripts/js");
}
@Assets.GetStyles()
@Assets.GetScripts()
</head>When you’re in release mode, you would see this in your page (links to the 3 bundles defined above):
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="/content/css" type="text/css" />
<link rel="stylesheet" href="/content/themes/base/css" type="text/css" />
<script type=”text/javascript” src=”/scripts/js”></script>
</head>In debug mode, however, the asset manager would automatically expand the contents of the bundle to individual links - so you would see something more like this:
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="/Content/site.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/jquery.ui.core.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/jquery.ui.resizable.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.selectable.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.accordion.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.autocomplete.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.button.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.dialog.css " type="text/css" />
<link rel="stylesheet" href="/content/themes/base/ jquery.ui.slider.css " type="text/css" />...
</head>hope this helps
-
resnyanskiy
commented
