एमवीसी 4 बीटा मिनिफिकेशन और बंडलिंग: ब्राउजर में फाइलें और डिबगिंग ऑर्डर करना

Question

मैंने एमवीसी 4 बीटा के साथ बंडलिंग और मिनीफिकेशन का उपयोग करना शुरू कर दिया है। मैं इसके साथ कुछ मुद्दों में भाग रहा हूं:

एक बात के लिए, यदि मैं क्लासिक <script src="Folder/js" type="text/javascript"/> बंडलिंग का उपयोग करता हूं, तो ऐसा लगता है कि मुझे यह सुनिश्चित करने के लिए मेरी फ़ाइलों का नाम बदलना होगा कि वे उचित क्रम में बंडल किए गए हैं।

• मान लीजिए कि मैं तीन जावास्क्रिप्ट फ़ाइलें हैं: "ants.js", "bugs.js", "insects.js"
• ants.js bugs.js पर निर्भर करता है
• bugs.js पर निर्भर करता है insects.js
• डिफ़ॉल्ट बंडलिंग उन्हें वर्णानुक्रम में बंडल करने लगती है।
• उन्हें ठीक से बंडल करने के लिए, मुझे उनका नाम बदलना होगा: "0.insects.js", "1.bugs.js", "2.ants.js"
• यह वास्तव में हैकिश है और वहां है एक क्लीनर तरीका बनें।

अगली समस्या जो मैं कर रहा हूं वह डिबगिंग है। मैं अपने परीक्षण ब्राउज़र में जावास्क्रिप्ट के माध्यम से कदम उठाना पसंद करता हूं, क्या DEBUG मोड में केवल minification को बंद करने का कोई तरीका है?

संपादित करें: स्पष्ट होने के लिए, मुझे पता है कि मैं बंडल बना सकता हूं और उन्हें सी # से पंजीकृत कर सकता हूं, यह वास्तव में ऐसा करने के लिए वास्तव में बदसूरत लगता है।

Answer 1

अस्थायी रूप से गैर-minified उत्पादन उपयोग इस

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 अपने config पर निर्भर करता है कि बना सकते हैं

स्थापित करने के लिए आदेश में आप 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

मैं कल इसी समस्या में भाग गया और नई प्रणाली.Web.Optimization नामस्थान के साथ एक अच्छा समाधान नहीं मिला। कुछ टूटे एमएसडीएन लिंक थे, इसलिए तथ्य यह है कि बीटा में सब कुछ है, इसका मतलब है कि यह बदल सकता है, लेकिन मैं digress ...

आप हमेशा उत्पादन के दौरान विकास के दौरान अलग-अलग स्क्रिप्ट लोड कर सकते हैं। एक 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> 

Answer 3

भी RequestReduce पर एक नज़र लग सकता है। यह किसी भी कोडिंग या कॉन्फ़िगरेशन के बिना आपकी स्क्रिप्ट और सीएसएस को बंडल करता है यह देखकर कि वे आपके पृष्ठ पर कैसे रखे जाते हैं और उसके अनुसार बंडल करते हैं। यह आपको web.config के माध्यम से या querystring param के माध्यम से व्यक्तिगत अनुरोधों के लिए turn off bundling and minification पर भी अनुमति देता है: RRFilter=disabled। यदि आप इसे पूरी तरह से एक config सेटिंग के आधार पर चाहता था

Answer 4

उपयोग करने के लिए मैं MVC का उपयोग की जरूरत है जावास्क्रिप्ट फ़ाइलों के आदेश को नियंत्रित करने के chrisortman द्वारा प्रस्तावित NonMinifyingJavascript के बजाय डिफ़ॉल्ट NoTransform। जहां तक ​​मुझे पता है कि यह वही करता है। लेकिन अभी भी इष्टतम नहीं है। आदर्श रूप से मैं प्रत्येक व्यक्तिगत स्क्रिप्ट फ़ाइल के लिए एक स्क्रिप्ट टैग चाहता हूं जब मैं डीबग करना चाहता हूं। इससे वीएस 11 के साथ डीबगिंग बहुत आसान हो जाती है, जिसे मैं उपयोग करना पसंद करता हूं (एक डीबगर इसलिए मैं एक डीबग सत्र में जेएस और सी # डीबग कर सकता हूं)। तो मैं इस छोटे सहायक बनाया:

@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 को भी ध्यान में रखता है यदि आपने एक सेट किया है!