2012-02-21 64 views
16

我只是嘗試ASP.NET MVC 4,但我無法弄清楚如何禁用Javascript/CSS縮小功能。尤其對於開發環境來說,這對調試起到很大幫助。我可以想象它會是web.config中的一個開關,但是由於ASP.NET MVC 4目前還處於測試階段,因此實際上沒有太多信息。希望如果有人能夠幫助或指向正確的博客文章等如何禁用ASP.NET MVC 4 Beta中的Javascript/CSS縮小測試版

+5

只是我的權利,或者是很可笑,這不是一個配置設置? – Jordan 2012-03-26 17:54:37

+10

@Jeff:Ruby on Rails有其自身的侷限性,就像每個平臺一樣。 – 2012-04-19 17:34:49

回答

18

在Global.asax.cs中

#if DEBUG 
     foreach (var bundle in BundleTable.Bundles) 
     { 
      bundle.Transform = new NoTransform(); 
     } 
#endif 
+1

現在已經在最新版本中更改,請參閱此答案的詳細信息:http://stackoverflow.com/a/11270224 – Michael 2012-08-03 00:09:38

+0

@邁克爾:是的,但答案是正確的*爲beta *作爲OP請求:-)我仍然有一個MVC 4測試版網站尚未升級,很高興我找到了這個答案:-) – 2013-02-07 03:18:55

4

另一種選擇將創建一個HTML助手,你可以用它來建立腳本和鏈接標籤。以下是我已經爲JavaScript的,這也可以爲CSS進行實施:

public static class BundleHelper 
    { 
     public static MvcHtmlString JsBundle(this HtmlHelper helper, string bundlePath) 
     { 
      var jsTag = new TagBuilder("script"); 
      jsTag.MergeAttribute("type", "text/javascript"); 

      return ReferenceBundle(helper, bundlePath, jsTag); 
     } 

     public static MvcHtmlString ReferenceBundle(this HtmlHelper helper, string bundlePath, TagBuilder baseTag) 
     { 
      var httpContext = helper.ViewContext.HttpContext; 
      var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); 

      Bundle bundle = BundleTable.Bundles.GetBundleFor(bundlePath); 
      var htmlString = new StringBuilder(); 

      if (bundle != null) 
      { 
       var bundleContext = new BundleContext(helper.ViewContext.HttpContext, BundleTable.Bundles, urlHelper.Content(bundlePath)); 

       if (!httpContext.IsDebuggingEnabled) 
       { 
        baseTag.MergeAttribute("href", System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(bundlePath)); 
        return new MvcHtmlString(baseTag.ToString()); 
       } 

       foreach (var file in bundle.EnumerateFiles(bundleContext)) 
       { 
        var basePath = httpContext.Server.MapPath("~/"); 
        if (file.FullName.StartsWith(basePath)) 
        { 
         var relPath = urlHelper.Content("~/" + file.FullName.Substring(basePath.Length)); 
         baseTag.MergeAttribute("href", relPath, true); 
         htmlString.AppendLine(baseTag.ToString()); 
        } 
       } 

      } 

      return new MvcHtmlString(htmlString.ToString()); 
     } 
    } 

現在,所有你需要做的就是把它在你的觀點:

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <link href="~/Content/css" rel="stylesheet" type="text/css" /> 
    <link href="~/Content/themes/base/css" rel="stylesheet" type="text/css" /> 
    @Html.JsBundle("~/scripts/js") 
    <meta name="viewport" content="width=device-width" /> 
</head> 

,它會根據web.config中的調試設置將腳本渲染爲單獨的引用,或使用新的捆綁/縮小功能。如果你想看更多的例子,我使用http://codecutout.com/resource-minify-bundling的一些代碼作爲創建助手的參考。他們的幫手寫的更好一些,當提供無效參數時拋出異常,等等......我還沒有到處去清理我的。

4

如果您不希望內容被縮小,您可以在Global.asax中註冊自己的包並使用NoTransform類。

我個人不希望我的腳本被轉換。我只是創建兩個腳本目錄。一個帶有調試腳本版本,另一個帶有最初下載的縮小版本。

MVC 4開箱即用縮小器(JsMinify)爲Opera打破了jQuery 1.7.1,所以我不想使用那個。我只是把下面幾行,我的Global.asaxApplication_Start()方法:

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/DebugScripts")" type="text/javascript"></script> 
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/ProductionScripts")" type="text/javascript"></script> 

當然:

Bundle debugScripts = new Bundle("~/DebugScripts", 
    new NoTransform("text/javascript")); 
debugScripts.AddDirectory("~/Scripts/Debug", "*.js"); 
BundleTable.Bundles.Add(debugScripts); 

Bundle productionScripts = new Bundle("~/ProductionScripts", 
    new NoTransform("text/javascript")); 
productionScripts.AddDirectory("~/Scripts/Minified", "*.js"); 
BundleTable.Bundles.Add(productionScripts); 

隨着在地方,我可以簡單地添加的兩行我_layouts.cshtml一方我們可以在這個地方得到更多時髦。我們只能生成一個包,並根據構建的類型選擇要包含的文件。

3

在Global.asax中調用EnableDefaultBundles(),你可以做到這一點之後......

 if (... running in development environment ...) 
     { 
      var registeredBundles = BundleTable.Bundles.GetRegisteredBundles(); 
      foreach (var bundle in registeredBundles) 
      { 
       if (bundle.Transform is System.Web.Optimization.JsMinify) 
        bundle.Transform = new NoTransform(); 
      } 
     } 

不算漂亮(修改狀態由系統設置),但它比所有其他建議代碼少了很多,仍然允許您使用標準綁定行爲,並且不會對您的視圖進行任何更改。

1

與其替換JsMinify和CssMinify的實例,可以改爲使用接口。 此選項在早期版本中不可用,因爲第二個構造函數參數是類型而不是接口。

IBundleTransform jsTransform; 
IBundleTransform cssTransform; 

#if DEBUG 
    jsTransform = new NoTransform("text/javascript"); 
    cssTransform = new NoTransform("text/css"); 
#else 
    jsTransform = new JsMinify(); 
    cssTransform = new CssMinify(); 
#endif 

Bundle jsBundle = new Bundle("~/JsB", jsTransform); 
Bundle cssBundle = new Bundle("~/CssB", cssTransform); 

或許也值得一提,對於附帶例如微細化以及非精縮版腳本jQuery的,可以使用一個輔助方法任選帶出 「.min」 爲DEBUG構建便於調試:

private string Min(string scriptNameIncludingMin) 
{ 
#if DEBUG 
    return scriptNameIncludingMin.Replace(".min", ""); // Remove .min from debug builds 
#else 
    return scriptNameIncludingMin; 
#endif 
} 

// ... 
jsBundle.AddFile(Min("~/Scripts/jquery-1.7.2.min.js")); 
+0

這是否停止js連接以及縮小?它也煩人的調試一個巨大的js文件。 – Alex 2012-05-30 06:28:50

0

另一種替代方法(帶v1.1.0.0和MVC5測試):

public class BundleConfig 
{ 
    public static void Register() 
    { 
     ScriptBundle jsBundle = new ScriptBundle("~/Scripts/myscript.min.js"); 
     jsBundle.Include("~/Scripts/myscript.js"); 
     DisableInDebugMode(jsBundle); 

     BundleTable.Bundles.Add(jsBundle); 
    } 

    private static void DisableInDebugMode(ScriptBundle jsBundle) 
    { 
    #if DEBUG 
     // Don't minify in debug mode 
     jsBundle.Transforms.Clear(); 
    #endif 
    } 
} 
3

論的新版本ASP.NET MVC只需添加

#if DEBUG 
      foreach (var bundle in BundleTable.Bundles) 
      { 
       bundle.Transforms.Clear(); 
      } 
#endif 

BundleConfig.RegisterBundles(...); 
相關問題