Come posso usare grunt-uncss con un'applicazione AngularJS? applicazione

miei AngularJS è composta da due URL:Come posso usare grunt-uncss con un'applicazione AngularJS? applicazione

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

Questo è il file index.html semplificata:

<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>

Oltre a contenere l'applicazione logica, il file script.js contiene anche i modelli html caricati tramite $templateCache servizio.

Con il http://myapp/#/foo URL, il foo modello html è inserito nell'elemento <div ui-view></div>. Allo stesso modo, con l'url http://myapp/#/bar, il modello html barra viene inserito in <div ui-view></div>.

Quello che voglio fare è utilizzare l'attività grunt-uncss per ridurre la dimensione style.css.

Il mio primo tentativo è stato:

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

Il file style.css è stato ridotto, ma non ha incluso gli stili richiesti dal foo e bar pagine.

Il mio secondo tentativo stava usando il deprecated urls parameter di essere caricato con PhantomJS:

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

Anche in questo caso, il file style.css è stato ridotto, ma non ha incluso gli stili richiesti dal foo e bar pagine .

Qualcuno sa come risolvere questo problema?

Grunt-uncss funziona solo con contenuto statico?

Grazie in anticipo,

Bernardo Pacheco

fonte

2014-10-29 Bernardo Pacheco

fare/foo e/bar hanno ciascuno i propri fogli di stile? o è tutto contenuto in style.css –

@KevinB no, tutti gli stili sono contenuti nel file style.css –

Non vedo alcun esempio di ciò che viene utilizzato su un'app angolare con percorsi multipli che hanno css che non è anche se usato in prima pagina. Penso che l'opzione 'urls:' sarà l'unica che funziona e funzionerà solo se la tua app angolare è in modalità HTML5. –

specificare tutte le file html, tra cui visualizzazioni:

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

È possibile specificare più di un file di HTML, così si dovrebbe includere tutti i tuoi visualizza i file (in questo caso foo.html e bar.html). Inoltre, usa l'opzione ignora per aggiungere classi che vengono caricate in fase di esecuzione (non esistono già nei file html), cioè create da jQuery o ngAnimate se ne stai usando una.

Esistono più opzioni, ad esempio è possibile personalizzare le query multimediali da lasciare dopo l'annullamento, fare riferimento alla documentazione fornita dagli autori - https://github.com/addyosmani/grunt-uncss.

fonte

2014-11-03 16:30:19 minijus

Ho il problema simile, ho configurato l'opzione ignora ma uncss non ingerisce più selettori come .firs.second e ho migliaia di selettori come questo nel mio file css – xzegga

Lo stesso qui, ho provato ad usare sia options.urls che passare l'array degli URL nei file, ma nessuno dei due sembra effettivamente vedere una versione di rendering dell'app perché sta tagliando tutti gli stili nidificati/specifici dei modelli di direttiva che vengono aggiunti in fase di runtime. Mi piacerebbe vedere un esempio di questo lavoro su una grande app angolare che ha molte direttive. – simplesthing

Questo progetto non valuta il javascript per le classi iniettate? – Mark

spudorato

È possibile fare riferimento al mio esempio repo su github. Lì ha un esempio completo di una semplice app da eseguire con angolare, bower e grunt-uncss.

Edit: Mi dispiace per quel pensiero avevo aggiunto il link

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

La configurazione di base sarebbe quella di aggiungere il codice qui sotto al tuo gruntfile

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 
 
    } 
 
    } 
 
},

fonte

2015-04-27 12:38:47

Questa risposta non è incredibilmente utile nella sua forma attuale, ma se potessi aggiungere un link al tuo repository e uno snippet di codice rilevante che mostra come potrebbe essere usato per risolvere il problema posto dal richiedente, questo potrebbe essere trasformato in un valido risposta. – user700390

Come posso usare grunt-uncss con un'applicazione AngularJS? applicazione

risposta

Problemi correlati