【问题标题】:ASP.NET Optimization - BundlingASP.NET 优化 - 捆绑
【发布时间】:2012-03-20 07:31:24
【问题描述】:

我一直在尝试 ASP.NET MVC 4 中的新缩小和捆绑功能,只要您使用 css 和 js 文件的默认文件夹约定,它就可以很好地工作。

/Content
/Scripts

我通常把css和脚本放在一个叫做Static的文件夹中,像这样

/Static/Css
/Static/Js

我尝试像这样注册自己的捆绑包:

public static class BundleCollectionExtensions
{
    public static void RegisterScriptsAndCss(this BundleCollection bundles)
    {
        var bootstrapCss = new Bundle("~/Static/Css", new CssMinify());
        bootstrapCss.AddDirectory("~/Static/Css", "*.css");
        bootstrapCss.AddFile("~/Static/Css/MvcValidation.css");
        bootstrapCss.AddFile("~/Static/Css/bootstrap-responsive.min.css");
        bootstrapCss.AddFile("~/Static/Css/bootstrap.min.css");

        bundles.Add(bootstrapCss);

        var bootstrapJs = new Bundle("~/Static/Js", new JsMinify());
        bootstrapJs.AddDirectory("~/Static/Js", "*.js");
        bootstrapJs.AddFile("~/Static/Js/jquery-1.7.1.min.js");
        bootstrapJs.AddFile("~/Static/Js/jquery.validate.min.js");
        bootstrapJs.AddFile("~/Static/Js/jquery.validate.unobtrusive.min.js");
        bootstrapJs.AddFile("~/Static/Js/bootstrap.min.js");
        bootstrapJs.AddFile("~/Static/Js/gunsforhire.js");

        bundles.Add(bootstrapJs);
    }
}

Global.ascx.cs

我这样做了:

BundleTable.Bundles.RegisterScriptsAndCss();

生成的标记如下所示:

<link href="/Static/Css?v=D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41" rel="stylesheet" type="text/css" />

<script src="/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1" type="text/javascript"></script>

但是它不起作用,请求看起来像这样:

Request URL:http://localhost:49603/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Request Method:GET
Status Code:301 Moved Permanently (from cache)
Query String Parametersview URL encoded
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1

Request URL:http://localhost:49603/Static/Js/?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Request Method:GET
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:49603
Referer:http://localhost:49603/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko)        Chrome/17.0.963.56 Safari/535.11
Query String Parametersview URL encoded
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Response Headersview source
Cache-Control:private
Content-Length:4757
Content-Type:text/html; charset=utf-8
Date:Thu, 01 Mar 2012 19:05:44 GMT
Server:Microsoft-IIS/7.5
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?   QzpcQENvZGVccGVsbGVccGVsbGVoZW5yaWtzc29uLnNlXHNyY1xXZWJcU3RhdGljXEpzXA==?=

我做错了什么?

更新

我想我终于能够通过执行以下操作来解决这个问题:

  1. 删除 AddDirectory 调用 bootstrapCss.AddDirectory("~/Static/Css", "*.css");

  2. 提供不反映真实目录结构的包路径

【问题讨论】:

  • 第二个“提供不反映真实目录结构的包路径”是什么意思?
  • 如果你有一个像 /scripts/app 这样的目录结构,你不应该在包中使用那个路径(“~/scripts/app”)。或者至少我在 mvc 4 rc 中遇到了一些问题。也许这不再是问题了。
  • 嗨,你知道我错过了哪个命名空间吗?我没有在 bootstrapcss 中获得 Addfile 或 AddDirectory。 ?

标签: asp.net-mvc-4 asp.net-optimization


【解决方案1】:

您所做的“错误”是您的捆绑路径对应于真实路径。据我了解,当“/Static/Css?v=D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41”的请求进来时,路由引擎首先寻找物理路径。它会找到与您的文件夹“静态”匹配的内容,并尝试在其中找到与“Css?v=D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41”匹配的文件。当它找不到一个时,因为它不存在,它会给出 404。(我也看到访问被拒绝。)当路由引擎找不到物理文件路径时,它会寻找其他处理程序,如捆绑和缩小以提供请求。

无论如何,我认为您已经从您的 cmets 中弄清楚了,但我不确定任何发现您问题的人都会非常清楚。只需从以下位置更改您的注册:

var bootstrapCss = new Bundle("~/Static/Css", new CssMinify());

到:

var bootstrapCss = new Bundle("~/bundles/Css", new CssMinify());

如果您进行更改,您的问题将消失,(假设没有对应于“捆绑包”的物理路径。

【讨论】:

    【解决方案2】:

    如果在几天前完成此操作并且效果很好。我创建了一个名为Helper 的文件夹,然后我创建了一个名为CssJsBuilder 的新类。

    我的班级是这样的:

    public static void Initializing()
    {
       IBundleTransform jstransformer;
       IBundleTransform csstransformer;
    
    #if DEBUG
                jstransformer = new NoTransform("text/javascript");
                csstransformer = new NoTransform("text/css");
    #else
          jstransformer = new JsMinify();
          csstransformer = new CssMinify();
    #endif
    
                var bundle = new Bundle("~/Scripts/js", jstransformer);
    
                bundle.AddFile("~/Scripts/jquery-1.6.2.js", true);
                bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js", true);
                bundle.AddFile("~/Scripts/jquery.validate.unobtrusive.js", true);
                bundle.AddFile("~/Scripts/jquery.unobtrusive-ajax.js", true);
                bundle.AddFile("~/Scripts/jquery.validate.js", true);
                bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js", true);
                bundle.AddFile("~/Scripts/AjaxLogin.js", true);
                bundle.AddFile("~/Scripts/knockout-2.0.0.debug.js", true);
                bundle.AddFile("~/Scripts/bootstrap.js", true);
                bundle.AddFile("~/Scripts/dungeon.custom.js", true);
    
                BundleTable.Bundles.Add(bundle);
    
                bundle = new Bundle("~/Content/css", csstransformer);
    
                bundle.AddFile("~/Content/bootstrap-responsive.css", true);
                bundle.AddFile("~/Content/bootstrap.css", true);
    
                BundleTable.Bundles.Add(bundle);
    
                bundle = new Bundle("~/Content/themes/base/css", csstransformer);
    
                bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true);
                bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true);
    
                BundleTable.Bundles.Add(bundle);
            }
    

    之后。转至Global.asax

    1. 删除或注释掉BundleTable.Bundles.RegisterTemplateBundles()
    2. CssJsBuilder.Initializing() 添加到Application_Start() 方法。
    3. 重新创建项目,然后重新启动。

    希望这也适用于您。

    【讨论】:

      【解决方案3】:

      在 Global.asax.cs 中替换

      BundleTable.Bundles.RegisterTemplateBundles();

      BundleTable.Bundles.EnableDefaultBundles();

      【讨论】:

        【解决方案4】:

        这对我来说是这样的。

        这是简化版,我只使用 default.aspx 文件没有 global.asax(如果需要,可以使用)

        在这个例子中,我使用了 2 个目录 Content2Scripts2

        在 Content2 中,我有 2 个 css 文件,一个用于 class="naziv",另一个用于 class="naziv2"

        在 Scripts2 中有 2 个文件,一个带有函数 f1() 定义,另一个带有 f2() 定义

        在/bin目录下应该有3个文件:

        Microsoft.Web.Infrastructure.dllSystem.Web.Optimization.dllWebGrease.dll

        <%@ Page Title="Home Page" Language="vb" debug="true"%>
        <%@ Import namespace="System.Web.Optimization" %>
        
        <script runat="server" >
            Sub Page_Load(sender As Object, e As EventArgs)
                System.Web.Optimization.BundleTable.EnableOptimizations = True ''true will force optimization even if debug=true
        
                Dim siteCssBundle = New StyleBundle("~/Content2/css")
                siteCssBundle.IncludeDirectory("~/Content2", "*.css")
                BundleTable.Bundles.Add(siteCssBundle)
        
                Dim siteJsBundle = New ScriptBundle("~/Scripts2/js")
                siteJsBundle.IncludeDirectory("~/Scripts2", "*.js")
                BundleTable.Bundles.Add(siteJsBundle)
            End Sub
        </script>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html>
            <head>
            </head>
            <body onload="f1(); f2();">
                <%: Styles.Render("~/Content2/css")%>
                <%: Scripts.Render("~/Scripts2/js")%>
                <br />
                <span class="naziv">Span 1</span> <br />
                <span class="naziv2">Span 2</span> <br />
            </body>
        </html>
        

        【讨论】:

          猜你喜欢
          • 2013-05-16
          • 1970-01-01
          • 1970-01-01
          • 2012-10-02
          • 2013-10-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多