是否有库存或可插入方式（如NuGet包）让我在MVC视图中声明.js，.css和理想.less个文件以及我使用它们的部分文件，并让他们自动运行时捆绑和缩小生产？ （a.k.a.“Autobunding”）
我尝试过内置的MVC 4捆绑。我不喜欢在BundleConfig.cs中将包定义远离页面作者期望找到它们的位置。对于非C＃团队成员来说，这是行不通的。
正如我正在寻找的一个例子，这是我使用SquishIt拼凑自己的内容。
ExtendedViewPage.cs
/// <summary>
/// Caches a bundle of .js and/or .css specific to this ViewPage, at a path similar to:
/// shared_signinpartial_F3BD3CCE1DFCEA70F5524C57164EB48E.js
/// </summary>
public abstract class ExtendedViewPage<TModel> : WebViewPage<TModel> {
// This is where I keep my assets, and since I don't actually store any in my root,
// I emit all my bundles here. I also use the the web deployment engine,
// and remove extra files on publish, so I never personally have to clean them up,
// and I also don't have to hand-identify generated bundles from original code.
// However, to keep from needing to give the app write permissions
// on a static content folder, or collocate bundles with original assets,
// or conform to a specific asset path, this should surely be configurable
private const string ASSET_PATH = "~/assets/";
/// <summary>
/// Emits here the bundled resources declared with "AddResources" on all child controls
/// </summary>
public MvcHtmlString ResourceLinks {
get {
return MvcHtmlString.Create(
string.Join("", CssResourceLinks) + string.Join("", JsResourceLinks));
}
}
// This allows all resources to be specified in a single command,
// which permits .css and .js resources to be declared in an
// interwoven manner, in any order the site author prefers
// For me, this makes it clearer, to group my related .css and .js links,
// and to place my often control-specific CSS near last in the list
/// <summary>
/// Queues compressible resources to be emitted with the ResourceLinks directive
/// </summary>
/// <param name="resourceFiles">Project paths to JavaScript and/or CSS files</param>
public void AddResources(params string[] resourceFiles) {
var css = FilterFileExtension(resourceFiles, ".css");
AddCssResources(css);
var js = FilterFileExtension(resourceFiles, ".js");
AddJsResources(js);
}
/// <summary>
/// Bundles JavaScript files to be emitted with the ResourceLinks directive
/// </summary>
/// <param name="resourceFiles">Zero or more project paths to JavaScript files</param>
public void AddJsResources(params string[] resourceFiles) {
if (resourceFiles.Any()) {
JavaScriptBundle jsBundle = Bundle.JavaScript();
foreach (string jsFile in resourceFiles) {
jsBundle.Add(jsFile);
}
// Pages render from the inside-out, which is required for us to expose
// our resources declared in children to the parent where they are emitted
// however, it also means our resources naturally collect here in an order
// that is probably not what the site author intends.
// We reverse the order with insert
JsResourceLinks.Insert(0, jsBundle.MvcRender(ASSET_PATH + ViewIdentifier + "_#.js"));
}
}
/// <summary>
/// Bundles CSS files to be emitted with the ResourceLinks directive
/// </summary>
/// <param name="resourceFiles">Zero or more project paths to CSS files</param>
public void AddCssResources(params string[] resourceFiles) {
// Create a separate reference for each CSS path, since CSS files typically include path-relative images.
foreach (
var cssFolder in resourceFiles.
GroupBy(r => r.Substring(0, r.LastIndexOf('/')).ToLowerInvariant()).
// Note the CssResourceLinks.Insert command below reverses not only desirably
// the order of view emission, but also undesirably reverses the order of resources within this one view.
// for this page we'll 'pre-reverse' them. There's probably a clearer way to address this.
Reverse()) {
CSSBundle cssBundle = Bundle.Css();
foreach (string cssFile in cssFolder) {
cssBundle.Add(cssFile);
}
// See JsResourceLinks.Insert comment above
CssResourceLinks.Insert(0, cssBundle.MvcRender(cssFolder.Key + "/" + ViewIdentifier + "_#.css"));
}
}
#region private implementation
private string _viewIdentifier = null;
// ViewIdentifier returns a site-unique name for the current control, such as "shared_signinpartial"
// Some security wonks may take issue with exposing folder structure here
// It may be appropriate to obfuscate it with a checksum
private string ViewIdentifier {
get {
if (_viewIdentifier == null) {
_viewIdentifier =
// VirtualPath uniquely identifies the currently rendering View or Partial,
// such as "~/Views/Shared/SignInPartial.cshtml"
Path.GetFileNameWithoutExtension(VirtualPath).
// This "Substring" truncates the ~/Views/ or ~/Areas/ in my build, in others
// but it is probably inappropriate to make this assumption.
// It is certainly possible to have views in the root.
// Substring(8).
// It's assumed all of these bundles will be output to a single folder,
// to keep filesystem write-access minimal, so we flatten them here.
Replace("/", "_").
// The following assumes a typical MS filesystem, preserve-but-ignore case.
// The .NET string recommendations suggest instead using ToUpperInvariant
// for such an operation, but this was just a personal preference.
// My IIS rules typically drop the case on all content served.
// It may be altogether inappropriate to alter,
// although appending the MD5 hash ensure it does no harm on other platforms,
// while still collapsing the cases where multiply-cased aliases are used
ToLowerInvariant();
}
return _viewIdentifier;
}
}
private List<MvcHtmlString> CssResourceLinks {
get { return getContextHtmlStringList("SquishItCssResourceLinks"); }
}
private List<MvcHtmlString> JsResourceLinks {
get { return getContextHtmlStringList("SquishItJsResourceLinks"); }
}
// Note that at the resource render, if no bundles of a specific type (.css or .js)
// have been provided, this performs the unnecessary operation of instanciating a new List<MvcHtmlString>
// and adding it to the HttpContext.Items. This get/set could benefit from some clarification.
private List<MvcHtmlString> getContextHtmlStringList(string itemName) {
IDictionary contextItems = Context.ApplicationInstance.Context.Items;
List<MvcHtmlString> resourceLinks;
if (contextItems.Contains(itemName)) {
resourceLinks = contextItems[itemName] as List<MvcHtmlString>;
}
else {
resourceLinks = new List<MvcHtmlString>();
contextItems.Add(itemName, resourceLinks);
}
return resourceLinks;
}
private string[] FilterFileExtension(string[] filenames, string mustEndWith) {
IEnumerable<string> filtered =
filenames.Where(r => r.EndsWith(mustEndWith, StringComparison.OrdinalIgnoreCase));
return filtered.ToArray();
}
#endregion private implementation
}
PageWithHeaderLayout.cshtml （示例用法）
@{
AddResources(
Links.Assets.Common.Script.GoogleAnalytics_js,
Links.Assets.Common.Style.ProprietaryTheme.jquery_ui_1_8_23_custom_css,
Links.Assets.Common.Style.SiteStandards_css,
Links.Assets.Common.CdnMirror.jquery._1_7_2.jquery_js,
Links.Assets.Common.CdnMirror.jQuery_Validate._2_0_0pre.jquery_validate_120826_js,
Links.Assets.Common.CdnMirror.jqueryui._1_8_23.jquery_ui_min_js,
Links.Assets.Common.JqueryPlugins.templates.jquery_tmpl_min_js,
Links.Assets.Common.JqueryPlugins.jquery_ajaxmanager_js,
Links.Assets.Common.JqueryPlugins.hashchange.jquery_ba_hashchange_min_js
);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@ViewBag.Title</title>
<meta name="description" content="@ViewBag.Description" />
<meta name="keywords" content="@ViewBag.Keywords" />
<link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" type="image/x-icon" />
<!-- all bundles from all page components are emitted here -->
@ResourceLinks
</head>
<body>
@Html.Partial(MVC.Common.Views.ContextNavigationTree)
<div id="pageContent">
@RenderBody()
</div>
</body>
</html>
不幸的是我写了它，所以它有很多局限性。脚本不会重复删除，它需要一种简单的方法来捆绑描述，我最近添加了一个丑陋的黑客来允许.less支持等。
有没有现成的解决方案呢？
答案 0 :(得分：1)
这是一种评论，但我的空间不足。
这很整洁但似乎你最终每个（完整的，渲染的）页面有一个捆绑，这对于首次访问该网站的情况来说几乎是最糟糕的情况。如果您有多个页面使用相同的母版页并且不添加任何其他内容，则最终会在每个页面上使用不同的名称下载相同的大文件。不要将名称基于页面名称，尝试连接所有文件名（按顺序）并计算MD5哈希值以用作捆绑名称 - 这可以作为一个相当不错的唯一性检查，并且应该真正减少您的带宽使用。您可以在SquishIt中看到我们如何执行此操作的示例here - 只需记住您计算的值将是代码中此时作为“键”的内容。我要考虑的另一件事是定义捆绑每个物理视图文件而不是整个页面，以最大限度地提高可重用性。
我意识到这听起来很关键，但我确实喜欢你的一般方向。我只是不确定确切的目的地是什么。如果您需要任何帮助，我会尝试非常仔细地看这个标签，而且我很容易在其他地方找到它。
就“自动捆绑”而言，我认为没有任何东西可以满足您的需求 - 很大程度上是因为它需要这种细致入微的方法。您可以查看RequestReduce - 它在没有干预的情况下为您做了很多优化，但我认为它不会将资产组合在一起。
答案 1 :(得分：-1)
请查看Enfold project。它可能是您正在寻找的解决方案。
假设您在Web项目中有以下视图：
〜/查看/主页/ About.cshtml
〜/浏览/首页/ Contact.cshtml
〜/查看/主页/ Index.cshtml
您可以这样组织您的Javascript文件：
〜/脚本/查看/ default.js
〜/脚本/浏览/首页/ default.js
〜/脚本/浏览/首页/ about.js
〜/脚本/浏览/首页/ contact.js
〜/ Scripts / Views / Home / index.js
通过这样的设置，将创建以下包：
〜/ bundles / home / about
〜/脚本/视图/ default.js
〜/脚本/视图/家庭/ default.js
〜/ scripts / views / home / about.js〜/ bundles / home / contact
〜/脚本/视图/ default.js
〜/脚本/视图/家庭/ default.js
〜/ scripts / views / home / contact.js〜/ bundles / home / index
〜/脚本/视图/ default.js
〜/脚本/视图/家庭/ default.js
〜/ scripts / views / home / index.js