1

是否有一种股票或可插入方式(如 NuGet 包)让我在我使用它们的 MVC 视图和部分中声明.js.css和理想的文件,并让它们在生产中自动运行时捆绑和缩小?.less(又名“自动绑定”)

我已经尝试过内置的 MVC 4 捆绑。我不喜欢捆绑定义远离页面作者期望找到它们的位置,在BundleConfig.cs. 这对于非 C# 团队成员是行不通的。

作为我正在寻找的示例,这是我自己使用SquishIt拼凑而成的。

扩展视图页面.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>

不幸的是我写了它,所以它有很多限制。脚本不会重复,它采用简单的方法来描述捆绑包,我最近添加了一个丑陋的 hack 以允许.less支持等。

是否有任何现有的解决方案可以做到这一点?

4

2 回答 2

1

这是一种评论,但我的空间不足。

这很简洁,但似乎每个(完整的,渲染的)页面最终都有一个捆绑包,这对于首次访问该网站的访问者来说几乎是最糟糕的情况。如果您有多个页面使用相同的母版页并且不添加任何其他内容,那么您最终会在每个页面上下载相同的大文件,但名称不同。不要将名称基于页面名称,而是尝试连接所有文件名(按顺序)并计算 MD5 哈希以用作您的包名称 - 这是一个相当好的唯一性检查,并且应该真正减少您的带宽使用. 你可以在这里看到一个例子关于我们如何在 SquishIt 中执行此操作 - 请记住,您计算的值将是代码中此时作为“键”输入的内容。我要考虑的另一件事是为每个物理视图文件而不是整个页面定义捆绑包,以最大限度地提高可重用性。

我意识到这听起来很重要,但我确实喜欢你的总体方向。我只是不确定确切的目的地是什么。如果您需要任何帮助,我会尝试密切关注此标签,并且很容易在其他地方找到。

就“自动捆绑”而言,我认为没有任何东西可以满足您的需求——很大程度上是因为它需要如此细致入微的方法。您可以查看RequestReduce - 它在没有干预的情况下为您做了很多优化,但我不相信它结合了资产。

于 2013-12-04T19:04:28.397 回答
-1

请看一下Enfold 项目。这可能是您正在寻找的解决方案。

假设您在 web 项目中有以下视图:

~/Views/Home/About.cshtml
~/Views/Home/Contact.cshtml
~/Views/Home/Index.cshtml

你可以这样组织你的 Javascript 文件:

~/Scripts/Views/default.js
~/Scripts/Views/Home/default.js
~/Scripts/Views/Home/about.js
~/Scripts/Views/Home/contact.js
~/Scripts/Views/Home/ index.js

通过这样的设置,将创建以下捆绑包:

〜/捆绑/家庭/关于

~/scripts/views/default.js
~/scripts/views/home/default.js
~/scripts/views/home/about.js

〜/捆绑/家庭/联系

~/scripts/views/default.js
~/scripts/views/home/default.js
~/scripts/views/home/contact.js

~/bundles/home/index

~/scripts/views/default.js
~/scripts/views/home/default.js
~/scripts/views/home/index.js

于 2015-01-02T14:46:37.760 回答