nasıl bir angularjs uygulama ile hırıltı-uncss kullanabilirim?

Benim angularjs uygulaması iki URL'ler ile oluşur:nasıl bir angularjs uygulama ile hırıltı-uncss kullanabilirim?

http://myapp/#/foo
http://myapp/#/bar

Bu basitleştirilmiş index.html dosyasıdır:

Ayrıca

<html> 

    <head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
    <div ui-view></div> 
    </body> 

    <script type="text/javascript" src="script.js"></script> 

</html>

uygulamasını içeren için mantık, script.js dosya da 0 üzerinden yüklenen html şablonları içerirservisi. http://myapp/#/foo URL ile

, foo html şablon <div ui-view></div> elemanı yerleştirilir. Aynı şekilde, http://myapp/#/bar url ile bar html şablon <div ui-view></div> eklenir. Yapmak istediğim ne

style.css boyutunu azaltmak için grunt-uncss görevi kullanmaktır.

uncss: { 
    dist: { 
    files: { 
     'style.css': [ 'index.html' ] 
    } 
}

style.css dosya düşürülmüştür ancak foo ve bara sayfalar gerektirdiği stilleri dahil etmedi:

Benim ilk girişimiydi. Yine

uncss: { 
    options: { 
    urls; [ 'http://myapp/#/foo', 'http://myapp/#/bar' ] 
    }, 
    dist: { 
    files: { 
     'style.css': [ 'index.html' ] 
    } 
}

, style.css dosya düşürülmüştür ancak foo ve çubuk sayfalarda gerektirdiği stilleri dahil etmedi:

deprecated urls parameter kullanıyordu Benim ikinci girişimi PhantomJS ile yüklenecek .

Birisi bu sorunu çözmek için nasıl bilir?

hırıltı-uncss yalnızca statik içerik ile çalışıyor mu? peşin

sayesinde

Bernardo Pacheco

kaynak

2014-10-29 Bernardo Pacheco

yapmak için gruntfile için aşağıdaki kodu eklemek olacaktır/foo ve/bar'ın her birinin kendi stil sayfaları var mı? veya tüm style.css –

@KevinB no içinde yer alan tüm stilleri style.css dosyasında –

içerdiği Bu bir örnek değil css olan birden çok yolları ile bir açısal uygulamada kullanılan ön tarafta da kullanılıyor.İşte 'urls:' seçeneğinin işe yarayan tek seçenek olacağını düşünüyorum ve bu sadece açısal uygulamanız html5 modundaysa işe yarayacak. –

tüm html dosyalarını içeren görünümler belirtin:

uncss: { 
    dist: { 
     options: { 
      ignore: ['.ng-move', '.ng-enter', '.ng-leave', '.created_by_jQuery'] 
     }, 
     files: { 
      'style.css': [ 'index.html', 'views/foo.html', 'views/bar.html' ] 
     } 
    } 
}

Sen html birden fazla dosya belirtebilirsiniz, bu nedenle içermelidir tüm senin dosyaları görüntüle (bu durumda foo.html ve bar.html). Eğer birini kullanıyorsanız Ayrıca, çalışma zamanında yüklenen sınıfları ekleme seçeneği görmezden kullanmak jQuery veya ngAnimate tarafından oluşturulan yani (zaten html dosyalarına yer almayan). https://github.com/addyosmani/grunt-uncss -

örneğin sen uncssing, yazarlar tarafından sağlanan belgelere bakın sonra medya sorguları bırakılmalıdır özelleştirerek, daha seçenek vardır.

kaynak

2014-11-03 16:30:19 minijus

Ben benzer bir sorun var, ben yoksayma seçeneği yapılandırılmış ama uncss .firs.second gibi birden fazla seçici clases ing değil ve benim css dosyasında bu gibi selektörler binlerce var – xzegga

Aynı burada, hem options.urls kullanmayı denedim ve dizide geçen URL'leri dosyalara dönüştürür, ancak aslında uygulamanın işlenmiş bir sürümünü görüyor görünmez, çünkü çalışma zamanında eklenen tüm iç içe geçmiş/belirli yönerge şablonları stillerini keser. Direktiflerin birçoğunu içeren büyük bir açısal uygulama üzerinde çalışmanın bir örneğini görmek isterim. – simplesthing

Bu proje, javascript'i enjekte edilen sınıflar için değerlendirmiyor mu? – Mark

utanmaz fişi

Sen github benim örnek repo başvurabilir. Orada, açısal, bower ve grunt-uncss çalıştıran basit bir todo uygulaması tam bir örneğidir.

Düzenleme: bağlantısını

https://github.com/JeremyCarlsten/grunt-uncss-angular-example

eklendi olduğu düşüncesiyle üzgünüm temel yapılandırma

uncss: { 
 
    dist: { 
 
    files: { 
 
     'path/to/where/you/want/cleaned.css': ['path/to/index.html'] // the index html could be a list of html files that all include css files 
 
    } 
 
    } 
 
},

kaynak

2015-04-27 12:38:47

Bu yanıt, şu anki haliyle son derece yararlı değildir, ancak repo'nuza ve ilgili kod snippet'ine bir sorun ekleyebilirseniz, sorunun yanıtlanacağı kişinin sorununu çözmek için nasıl kullanılabileceğini gösteren bir kod parçacığı eklenebilir. Cevap. – user700390

nasıl bir angularjs uygulama ile hırıltı-uncss kullanabilirim?

cevap

İlgili konular