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！

Answer 3

也可以看看RequestReduce。它将您的脚本和CSS捆绑在一起，无需任何编码或配置，方法是查看它们在页面上的布局方式，并根据这些内容进行捆绑。它还允许您通过web.config turn off bundling and minification或通过查询字符串参数RRFilter=disabled进行单个请求。

Answer 4

我昨天遇到了同样的问题，无法找到新的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>

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

4 个答案: