Wie kann ich grunt-uncss mit einer AngularJS-Anwendung verwenden?

Meine AngularJS Anwendung wird von zwei Urls zusammen:Wie kann ich grunt-uncss mit einer AngularJS-Anwendung verwenden?

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

Dies ist die vereinfachte Datei index.html:

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

Neben der Anwendung enthält, Logik, die script.js Datei enthält auch die HTML-Vorlagen, die über 0 geladen werdenService.

Mit der http://myapp/#/foo URL, die foo HTML-Vorlage wird im <div ui-view></div> Elemente eingefügt. Auf die gleiche Weise, mit der http://myapp/#/bar URL, wird die bar HTML-Vorlage in <div ui-view></div> eingefügt.

Was ich tun möchte, ist die Verwendung der grunt-uncss Aufgabe, um die style.css Größe zu reduzieren.

Mein erster Versuch war:

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

Die style.css Datei reduziert wurde, aber es hat nicht die Stile der foo und bar Seiten erforderlich enthalten.

Mein zweiter Versuch, die deprecated urls parameter wurde mit mit PhantomJS geladen werden:

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

Auch die style.css Datei reduziert wurde, aber es hat nicht die Stile der foo und bar Seiten erforderlich inbegriffen .

Jemand weiß, wie man dieses Problem löst?

Funktioniert Grunt-Uncss nur mit statischem Inhalt?

Vielen Dank im Voraus,

Bernardo Pacheco

Quelle

2014-10-29 Bernardo Pacheco

zu tun hinzufügen/foo und/bar haben jeweils eigene Stylesheets? oder ist alles in style.css enthalten –

@KevinB Nein, alle Stile sind in der Datei style.css enthalten –

Ich sehe keine Beispiele dafür, dass es auf einer eckigen App mit mehreren Routen verwendet wird, die css haben, die nicht Ich denke, die 'URLs:' Option wird die einzige sein, die funktioniert, und das wird nur funktionieren, wenn Ihre eckige App im HTML5-Modus ist. –

alle Ihre HTML-Dateien angeben, einschließlich der Ansichten:

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

Sie können mehr als eine Datei von html angeben, so sollten Sie umfassen alle Dateien anzeigen (in diesem Fall foo.html und bar.html). Verwenden Sie außerdem die ignore-Option, um Klassen hinzuzufügen, die zur Laufzeit geladen werden (nicht bereits in HTML-Dateien vorhanden), d. H. Erstellt von jQuery, oder ngAnimate, wenn Sie eine verwenden.

Es gibt mehrere Optionen, z. B. können Sie anpassen, welche Medienabfragen nach dem Entnehmen verbleiben sollen. Informationen hierzu finden Sie in der Dokumentation der Autoren - https://github.com/addyosmani/grunt-uncss.

Quelle

2014-11-03 16:30:19 minijus

Ich habe das ähnliche Problem, ich konfigurierte ignorieren Option, aber uncss nicht ingorbiert mehrere Selektor Klassen wie .firs.second und ich habe tausend von Selektoren wie diese in meiner CSS-Datei – xzegga

Das gleiche hier, ich habe versucht mit beiden options.urls und Weitergabe in Array von URLs in Dateien, aber beide scheinen tatsächlich keine gerenderte Version der App zu sehen, da sie alle verschachtelten/spezifischen Stile von zur Laufzeit hinzugefügten Anweisungsvorlagen ausschneiden. Ich würde gerne ein Beispiel dafür sehen, wie man an einer großen eckigen App arbeitet, die viele Anweisungen enthält. – simplesthing

Bewertet dieses Projekt nicht das Javascript für injizierte Klassen? – Mark

schamlose Werbung

Sie können auf Github zu meinem Beispiel Repo beziehen. Dort gibt es ein vollständiges Beispiel für eine einfache Todo-App, die eckig, kauernd und grunzend läuft.

Edit: Sorry about diesem Gedanken ich den Link

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

Die Grundkonfiguration hinzugefügt hatte, würde sein, den Code unten auf Ihre 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 
 
    } 
 
    } 
 
},

Quelle

2015-04-27 12:38:47

Diese Antwort ist in ihrer jetzigen Form nicht unglaublich nützlich, aber wenn Sie einen Link zu Ihrem Repo hinzufügen könnten und ein relevanter Codeausschnitt zeigen würde, wie er das Problem lösen könnte, wie es vom Fragesteller gestellt wurde, könnte dies zu einer realisierbaren Lösung werden Antworten. – user700390

Wie kann ich grunt-uncss mit einer AngularJS-Anwendung verwenden?

Antwort

Verwandte Themen