14

我已经开始使用 MVC4 Beta 中包含的捆绑和缩小。我遇到了一些问题:

一方面,如果我使用经典<script src="Folder/js" type="text/javascript"/>捆绑,似乎我必须重命名我的文件以确保它们以正确的顺序捆绑。

  • 假设我有三个 javascript 文件:“ants.js”、“bugs.js”、“insects.js”
  • ants.js 依赖于 bugs.js
  • bugs.js 依赖于昆虫.js
  • 默认捆绑似乎按字母顺序捆绑它们。
  • 为了让它们正确捆绑,我必须将它们重命名为:“0.insects.js”、“1.bugs.js”、“2.ants.js”
  • 这真的很hackish,必须有一种更清洁的方式。

我遇到的下一个问题是调试。我喜欢在我的测试浏览器中单步执行 javascript,有没有办法在调试模式下关闭缩小?

编辑:需要明确的是,我知道我可以创建包并从 C# 注册它们,这样做似乎真的很难看。

4

4 回答 4

11

要临时获得非缩小输出,请使用此

  public class NonMinifyingJavascript : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse bundle)
    {
        if(bundle == null)
        {
            throw new ArgumentNullException("bundle");
        }

        context.HttpContext.Response.Cache.SetLastModifiedFromFileDependencies();

        foreach(FileInfo file in bundle.Files)
        {
            HttpContext.Current.Response.AddFileDependency(file.FullName);
        }

        bundle.ContentType = "text/javascript";
        //base.Process(context, bundle);
    }
}

如果您希望它完全基于配置设置,我想您可以创建一个 IBundle 转换,根据您的配置设置委托给这个或 JsMinify

为了控制 JavaScript 文件的顺序,您需要使用 BundleFileSetOrdering

 var javascriptBundle = new Bundle("~/site/js", new NonMinifyingJavascript());

         //controls ordering for javascript files, otherwise they are processed in order of AddFile calls
         var bootstrapOrdering = new BundleFileSetOrdering("bootstrap");
         //The popover plugin requires the tooltip plugin
         bootstrapOrdering.Files.Add("bootstrap-tooltip.js");
         bootstrapOrdering.Files.Add("bootstrap-popover.js");
         BundleTable.Bundles.FileSetOrderList.Add(bootstrapOrdering);
         javascriptBundle.AddDirectory("~/Scripts", "bootstrap-*.js");
于 2012-03-12T15:52:47.717 回答
7

我使用 MVC 默认的 NoTransform 而不是 chrisortman 提出的 NonMinifyingJavascript。据我所知,它也是如此。但仍然不是最优的。理想情况下,当我想调试时,我希望每个单独的脚本文件都有一个脚本标签。这使得使用我喜欢使用的 VS11 进行调试变得更加容易(一个调试器,因此我可以在一个调试会话中调试 js 和 c#)。所以我创建了这个小帮手:

@helper RenderScriptTags(string virtualPath)
{
    if (Minify /* some appsetting */)
    {
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(virtualPath)"></script>
    }
    else
    {
        foreach (var file in System.Web.Optimization.BundleResolver.Current.GetBundleContents(virtualPath))
        {
            <script src="@Url.Content(file)"></script>
        }
    }
}

@RenderScriptTags("~/libraries")

我有一个单页应用程序,所以我在我的主 cshtml 文件中有这个,但是通过将它移动到一个 htmlhelper 扩展方法可以很容易地概括它。效果很好!

如果您设置了 BundleFileSetOrdering,此代码还会考虑!

于 2012-03-14T10:26:34.877 回答
2

也可以看看RequestReduce。它通过查看它们在您的页面上的布局并据此捆绑您的脚本和 CSS,而无需任何编码或配置。它还允许您通过 web.config 或通过查询字符串参数关闭单个请求的捆绑和缩小:RRFilter=disabled

于 2012-03-11T18:33:06.543 回答
1

昨天我遇到了同样的问题,找不到使用新 System.Web.Optimization 命名空间的好的解决方案。有一些损坏的 MSDN 链接,所以一切都处于测试阶段的事实意味着它可能会改变,但我离题了......

您总是可以在开发期间加载脚本而不是在生产期间加载脚本。使用 AppSetting 轻松实现:

@if (System.Configuration.
    ConfigurationManager.AppSettings["BundleResources"] != null)
{
    @* load the css & js using bundles *@
}
else
{
    @* load the css & js files individually*@
}

然后,您可以通过在 web.config 中注释掉一个 appsetting 来启用/禁用优化:

<appSettings>
    ...
    <!--<add key="BundleResources" value="uhuh" />-->
    ...
</appSettings>
于 2012-03-11T18:20:59.570 回答