2013-02-08 16 views
14

Bir css dosyası kümesini oluşturmaya çalışıyorum ancak çıktı yanlış sırada. MVC4 Beta Minification and Bundling: Ordering files and debugging in browser numaralı çözümü denedim, ancak yardımcı olmadı. Eğer jquery-ui top geliyor gördüğünüz gibi burada MVC4 StyleBundle paketi doğru sırayla oluşturmuyor

bundles.Add(new StyleBundle("~/stylesheet") 
    .Include("~/css/main.css") 
    .Include("~/css/mvc.css") 
    .Include("~/js/jquery.thickbox.css") 
    .Include("~/js/jquery.rating.css") 
    .Include("~/css/ProductListing.css") 
    .Include("~/css/dropdown/dropdown.css") 
    .Include("~/css/dropdown/dropdown.vertical.css") 
    .Include("~/js/fancybox/jquery.fancybox-1.3.1.css") 
    .Include("~/css/scartpopup.css") 
    .Include("~/css/ShoppingCart.css") 
    .Include("~/css/ceebox.css") 
    .Include("~/css/tooltip.css") 
    .Include("~/css/recent_blog_posts.css") 
    .Include("~/css/ProductDetail.css") 
    .Include("~/css/jquery-ui-1.7.3.custom.css") 
    .Include("~/css/filter_box.css") 
    .Include("~/css/custom_page.css") 
    .Include("~/css/Checkout.css") 
    .Include("~/css/CheckoutButton.css") 
); 

Ve

, sonucudur: İşte demetidir.

<link href="/css/jquery-ui-1.7.3.custom.css" rel="stylesheet"/> 
<link href="/css/main.css" rel="stylesheet"/> 
<link href="/css/mvc.css" rel="stylesheet"/> 
<link href="/js/jquery.thickbox.css" rel="stylesheet"/> 
<link href="/js/jquery.rating.css" rel="stylesheet"/> 
<link href="/css/ProductListing.css" rel="stylesheet"/> 
<link href="/css/dropdown/dropdown.css" rel="stylesheet"/> 
<link href="/css/dropdown/dropdown.vertical.css" rel="stylesheet"/> 
<link href="/js/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet"/> 
<link href="/css/scartpopup.css" rel="stylesheet"/> 
<link href="/css/ShoppingCart.css" rel="stylesheet"/> 
<link href="/css/ceebox.css" rel="stylesheet"/> 
<link href="/css/tooltip.css" rel="stylesheet"/> 
<link href="/css/recent_blog_posts.css" rel="stylesheet"/> 
<link href="/css/ProductDetail.css" rel="stylesheet"/> 
<link href="/css/filter_box.css" rel="stylesheet"/> 
<link href="/css/custom_page.css" rel="stylesheet"/> 
<link href="/css/Checkout.css" rel="stylesheet"/> 
<link href="/css/CheckoutButton.css" rel="stylesheet"/> 

Stil sayfalarının doğru sırada oluşturulduğundan nasıl emin olabilirim?

+0

Birden fazla pakette başvurulan belirli CSS'ye sahip olduğumda veya doğrudan _Layout.cshtml dosyasında dahil edildiğinde bunu yaşadım. – da7rutrak

+0

Birden fazla pakette başvurulmuyor. _layout.cshtml dosyasına koymalısınız, tüm sayfalarda kullanılır. Garip bir şekilde, dosyayı jqui.css gibi başka bir şeye yeniden adlandırırsam sorun gider. –

+0

CSS dosyasını doğrudan _Layout.cshtml dosyasında başvuruyorsunuz, çünkü bu paketin olması gereken dosyaya dahil edilmediniz. – da7rutrak

cevap

21

Paketleme, CSS dosyalarını tam olarak aynı sıraya göre oluşturmaz, farklı bir mantık izler. Eğer tanımlanan bunları işlemek gerekiyorsa, o zaman özel bir IBundleOrderer oluşturmak ve gerekli düzenleyinin olarak demetine ayarlayın olmalıdır:

public class AsDefinedBundleOrderer : IBundleOrderer 
{ 
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) 
    { 
     return files; 
    } 
} 

Ve

var bundle = new StyleBundle("~/stylesheet"); 
bundle.Orderer = new AsDefinedBundleOrderer(); 
bundles.Add(bundle); 

O zaman bu liste ile hiçbir şey yapacağız Render, bunları tam olarak aynı sırayla işleyecektir.

bundling siparişi varsayılan

Güncelleme bir Bundle içindeki öğeleri sıralamak için IBundleOrderer kavramını kullanır. Bundle sınıf Bu gibi görünüyor Orderer mülkü vardır: Eğer özel düzenleyinin eskisinin üzerine yazma kadar Yani varsayılan ayrıca sipariş aslında bir DefaultBundleOrderer olduğunu

public IBundleOrderer Orderer 
{ 
    get 
    { 
    if (this._orderer == null) 
     return (IBundleOrderer) DefaultBundleOrderer.Instance; 
    else 
     return this._orderer; 
    } 
    set 
    { 
    this._orderer = value; 
    this.InvalidateCacheEntries(); 
    } 
} 

. Burada,

public interface IBundleOrderer 
{ 
    IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files); 
} 

Bunun DefaultBundleOrderer uygulama BundleContext dosyaları sıralar OrderFiles uygulanmasından elde snippet'idir:

IBundleOrderer aşağıdaki imzası vardır Yani farklı

foreach (BundleFileSetOrdering ordering in (IEnumerable<BundleFileSetOrdering>) context.BundleCollection.FileSetOrderList) 
    DefaultBundleOrderer.AddOrderingFiles(ordering, (IEnumerable<FileInfo>) list, fileMap, foundFiles, result); 

sonuç, çünkü bu olur. Eğer Application_Start bu çağrı Yani

public static void AddDefaultFileOrderings(IList<BundleFileSetOrdering> list) 
{ 
    if (list == null) 
    throw new ArgumentNullException("list"); 
    BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("css"); 
    bundleFileSetOrdering1.Files.Add("reset.css"); 
    bundleFileSetOrdering1.Files.Add("normalize.css"); 
    list.Add(bundleFileSetOrdering1); 
    BundleFileSetOrdering bundleFileSetOrdering2 = new BundleFileSetOrdering("jquery"); 
    bundleFileSetOrdering2.Files.Add("jquery.js"); 
    bundleFileSetOrdering2.Files.Add("jquery-min.js"); 
    bundleFileSetOrdering2.Files.Add("jquery-*"); 
    bundleFileSetOrdering2.Files.Add("jquery-ui*"); 
    bundleFileSetOrdering2.Files.Add("jquery.ui*"); 
    bundleFileSetOrdering2.Files.Add("jquery.unobtrusive*"); 
    bundleFileSetOrdering2.Files.Add("jquery.validate*"); 
    list.Add(bundleFileSetOrdering2); 
    BundleFileSetOrdering bundleFileSetOrdering3 = new BundleFileSetOrdering("modernizr"); 
    bundleFileSetOrdering3.Files.Add("modernizr-*"); 
    list.Add(bundleFileSetOrdering3); 
    BundleFileSetOrdering bundleFileSetOrdering4 = new BundleFileSetOrdering("dojo"); 
    bundleFileSetOrdering4.Files.Add("dojo.*"); 
    list.Add(bundleFileSetOrdering4); 
    BundleFileSetOrdering bundleFileSetOrdering5 = new BundleFileSetOrdering("moo"); 
    bundleFileSetOrdering5.Files.Add("mootools-core*"); 
    bundleFileSetOrdering5.Files.Add("mootools-*"); 
    list.Add(bundleFileSetOrdering5); 
    BundleFileSetOrdering bundleFileSetOrdering6 = new BundleFileSetOrdering("prototype"); 
    bundleFileSetOrdering6.Files.Add("prototype.js"); 
    bundleFileSetOrdering6.Files.Add("prototype-*"); 
    bundleFileSetOrdering6.Files.Add("scriptaculous-*"); 
    list.Add(bundleFileSetOrdering6); 
    BundleFileSetOrdering bundleFileSetOrdering7 = new BundleFileSetOrdering("ext"); 
    bundleFileSetOrdering7.Files.Add("ext.js"); 
    bundleFileSetOrdering7.Files.Add("ext-*"); 
    list.Add(bundleFileSetOrdering7); 
} 

:

BundleConfig.RegisterBundles(BundleTable.Bundles); 

Aslında tanımlanan varsayılan BundleCollection geçmesi bu değil elbette rastgele sıralama algoritması :) kurallar BUndleCollection sınıfında tanımlanır olduğunu Kütüphanede.biz kütüphane dosyaları çeşit tercih ettiğini söyleyebiliriz sürecini kolaylaştırmak istiyorsanız

private static void AddOrderingFiles(BundleFileSetOrdering ordering, IEnumerable<FileInfo> files, Dictionary<string, HashSet<FileInfo>> fileMap, HashSet<FileInfo> foundFiles, List<FileInfo> result) 
{ 
    foreach (string key in (IEnumerable<string>) ordering.Files) 
    { 
    if (key.EndsWith("*", StringComparison.OrdinalIgnoreCase)) 
    { 
     string str = key.Substring(0, key.Length - 1); 
     foreach (FileInfo fileInfo in files) 
     { 
     if (!foundFiles.Contains(fileInfo) && fileInfo.Name.StartsWith(str, StringComparison.OrdinalIgnoreCase)) 
     { 
      result.Add(fileInfo); 
      foundFiles.Add(fileInfo); 
     } 
     } 
    } 
    else if (fileMap.ContainsKey(key)) 
    { 
     List<FileInfo> list = new List<FileInfo>((IEnumerable<FileInfo>) fileMap[key]); 
     list.Sort((IComparer<FileInfo>) FileInfoComparer.Instance); 
     foreach (FileInfo fileInfo in list) 
     { 
     if (!foundFiles.Contains(fileInfo)) 
     { 
      result.Add(fileInfo); 
      foundFiles.Add(fileInfo); 
     } 
     } 
    } 
    } 
} 

Sonuç

:

yüzden BundleFileSetOrdering örneklerini içine bir tane-birer geçti var ve birden fazla olasılık bulunursa diğer dosyalarda bir sıralama yapar. Bu çoğu zaman beklenen davranıştır, ancak görebildiğiniz gibi AsDefinedBundleOrderer ile kolayca geçersiz kılınabilir, bu yüzden verilen dosya kümesinde hiçbir şey yoktur, böylece sipariş orijinal olarak kalır.

+0

Mükemmel, teşekkürler :) –

+1

"Bundling'in CSS dosyalarını tam olarak aynı sırayla oluşturması beklenmiyor". Bu bilgiyi nereden buldunuz? Öğreticiyi okudum [here] (http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) ve doğru şekilde aldığınızdan emin olmak için tercih edilen yaklaşım gibi görünmesini sağlar Sipariş, dosyaları istediğiniz sıraya göre eklemektir. – bbak

+0

Ve açıklığa kavuşturmak için aynı sorunu yaşıyordum ve cevabınız benim için çözdü. Ben sadece, StyleBundles için siparişin nasıl çalıştığını ve neden ScriptBundles için siparişten farklı bir şekilde çalıştığını anlamak istiyorum. Tüm ScriptBundles dosyaları, özel IBundleOrderer – bbak