【问题标题】:MVC5 bundles does not work for some resourcesMVC5 捆绑包不适用于某些资源
【发布时间】:2017-12-16 04:28:54
【问题描述】:

这很好奇。我在 BundleConfig.cs 中有这些包:

           bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.css",
                      "~/Content/nprogress.css",
                      "~/Content/iCheck/flat/green.css",
                      "~/Content/daterangepicker.css",
                      "~/Content/bootstrap-dialog.css",
                      "~/Content/Tooltipster/css/tooltipster.css",
                      "~/Content/custom.css"));

            bundles.Add(new ScriptBundle("~/bundles/gentelella").Include(
                        "~/Scripts/fastclick.js",
                        "~/Scripts/nprogress.js",
                        "~/Scripts/jquery.icheck.js",
                        "~/Scripts/date.js",
                        "~/Scripts/moment-with-locales.js",
                        "~/Scripts/daterangepicker.js",
                        "~/Scripts/validator/validator.js",
                        "~/Scripts/bootstrap-dialog.js",
                        "~/Scripts/jquery.tooltipster.js",
                        "~/Scripts/custom.js"));

看到我有 CSS 包和脚本包。请特别查看两个包中的最后一个,custom.css 和 custom.js。

奇怪的是,在所有文件中,只有 custom.css 和 custom.js 在发布站点时没有呈现。当我调试时,一切正常。问题仅发生在生产现场。

custom.css 和 custom.js 都没有最小化。你可以看到自定义 css here 和 custom.js here

渲染时,所有 CSS 都使用此 URL 加载:http://demo.relojelectronico.cl/Content/css?v=l7FFCONJaEcRHBZMIAQIwzM3XkNczNlgWBYwjHtrumM1

并且所有的 JS 都用:http://demo.relojelectronico.cl/bundles/gentelella?v=vBQcZjDbD_j0oRIktzJoqND9pbeEqe-jNtQFHZ9YfMM1 渲染

任何帮助将不胜感激。

编辑:

我注意到 CSS 文件已正确呈现。问题只是 custom.js。

为了测试它,我将它分开捆绑,这样:

        bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                "~/Scripts/custom.js"
            ));

这样你就可以看到捆绑的版本here

奇怪的是,原来的 JS 是这样开头的:

/**
 * Resize function without multiple trigger
 * 
 * Usage:
 * $(window).smartresize(function(){  
 *     // code here
 * });
 */
(function ($, sr) {
    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            }

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    };

    // smartresize 
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');
/**
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');



// Sidebar
function init_sidebar() {
    // TODO: This is some kind of easy fix, maybe we can improve this
    var setContentHeight = function () {
        // reset height
        $RIGHT_COL.css('min-height', $(window).height());

        var bodyHeight = $BODY.outerHeight(),
            footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
            leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
            contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

        // normalize content
        contentHeight -= $NAV_MENU.height() + footerHeight;

        $RIGHT_COL.css('min-height', contentHeight);
        $RIGHT_COL.css('height', contentHeight);
    };

(我刚刚放置了它的开头)。如您所见,创建捆绑包时,它从 init_sidebar 函数开始。 JS文件中的很多函数也是如此。捆绑后它们会从文件中删除。

这怎么可能?

我已经测试了 BundleTable.EnableOptimizations = false;在 BundleConfig 中,custom.js 按原样呈现。该问题仅在优化时出现。

【问题讨论】:

    标签: css asp.net-mvc bundling-and-minification asp.net-mvc-5.2


    【解决方案1】:

    尝试添加

    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
    

    在网络配置&lt;modules&gt; under &lt;system.webServer&gt;.

    来源:https://forums.asp.net/t/1857743.aspx?Bundling+not+working+when+deployed+to+web+host+works+fine+locally

    有用的链接:Why is my CSS bundling not working with a bin deployed MVC4 app?

    【讨论】:

    • 但是为什么它可以与其他资源一起使用?因此,应该添加 Bundle 模块。正如我所提到的,所有的 CSS 文件都是捆绑的,但是 custom.css。脚本也是如此。
    • 我已经编辑了这个问题。问题仅在JS文件中。由于某些奇怪的原因,捆绑时删除了原始 JS 中的一些函数。
    【解决方案2】:

    如果这有助于其他人面临这个问题,我会回答我的问题。

    这没有记录,但我发现了问题所在。

    事实证明,在两个文件夹(内容和脚本)中都存在 custom.css 和 custom.js 的缩小版本(分别名为 custom.min.css 和 custom.min.js)。那些缩小版不是custom.css和custom.js对应的缩小版,而是原版。

    所以,我使用了在线缩小器(for CSSfor JS)并替换了网站的最小版本,并且它工作了。

    这是结论。在 ASP.NET MVC 中启用优化时,优化器首先查找等效的“.min”。如果文件夹中存在文件。如果是,则该文件将发送到浏览器。如果没有,则执行缩小。

    这也可能是“.min”的原因。文件的版本被添加到捆绑包中,它不起作用,根本不发送文件。

    也许所有这些都记录在某处,但我还没有找到。

    干杯,

    詹姆

    【讨论】:

    • 参考ms documentationUsing Bundling and Minification with ASP.NET MVC部分(第一个点)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-27
    • 2015-03-19
    • 1970-01-01
    • 2019-11-05
    • 1970-01-01
    相关资源
    最近更新 更多