MVC4 Beta缩小和捆绑:在浏览器中订购文件和调试

Question

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

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

• 假设我有三个javascript文件:"ants.js","bugs.js","insect.js"
• ants.js取决于bugs.js
• bugs.js取决于insect.js
• 默认捆绑似乎按字母顺序捆绑它们.
• 为了让它们正确捆绑,我必须将它们重命名为:"0.insects.js","1.bugs.js","2.ants.js"
• 这真的是hackish,必须有一个更清洁的方式.

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

编辑:要清楚,我知道我可以创建捆绑包并从C#注册它们,只是看起来真的很丑陋.

Answer 1

要暂时获得非缩小输出,请使用此选项

  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);
    }
}

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

为了控制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");

Answer 2

我使用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!