[Erledigt] CSS in eine Datei packen

Paul.Schramenko · 28.01.2011, 14:22

Hallo zusammen,
ich habe ein kleines Problemchen, naja es ist eigentlich nicht so schlimm... sieht einfach nur scheiße aus.

Zum Problem ich habe mir einen kleinen CSS Packer geschrieben, der mit aus verschiedenen Dateien eine zusammenbauen soll.

Beispiel.
Alle Seiten:
default.css
menue.css

Seitenspzifiesch:
Index:
tpl/index.css

Impressum:
tpl/impressum.css

Kontakt:
table.css
tpl/contact.css

Demnach bräuchte ich auf:
Index: default.css + menue.css + tpl/index.css
Impressum: default.css + menue.css + tpl/impressum.css
Kontakt: default.css + menue.css + table.css + tpl/contact.css

Die Dateien möchte ich einfach zusammenmergen das geschiet dann Controller-Action spezifisch (bsp. indexIndex.css, indexArchive.css, contactIndex.css, usw.). und diese dann gecached auf der Platte ablegen, sodass beim nächsten Zugfriff diese direkt genommen werden können.

Das funktioniert auch größtenteils gut, aber nicht komplett so wie ich es gerne hätte. Hier ein Auszug aus der indexIndex.css

Code:

body{margin:0;padding:0;font-size:11px;color:#595959;font-family:Arial,sans-serif;}
 a{outline:none;text-decoration:none;color:#595959;}
 a:hover{text-decoration:underline;color:#595959;}
 #headLayer{width:100%;height:100px;float:left;}
 .clearfix{clear:both;}
 .clearfixR{clear:right;}
 .clearfixL{clear:left;}

.codeTable{border-spacing:0;padding:0 10px 2px 10px;margin:10px;border:1px solid #595959;width:560px !important;min-width:560px;max-width:560px;background:#EEEEEE url(/public/layouts/images/caro.png) repeat top left;overflow:auto;overflow-y:auto !important;overflow-x:hidden !important;
}

Wie man sieht sind da teilweise noch Idents vorne, teilweise wird die schließende geschweifte Klammer in der nächsten Zeile dargestellt, usw.
Ich finde einfach den Fehler nicht, und ein Fehler muss ja vorhanden sein im Code, sonst würde es richtig dargestellt werden.

Hier kommt der Code, der das ganze generiert:

PHP-Code:

  protected function _compressResult()
{
    $result = $this->_result;

    $replace = array(
        "!/\*[^*]*\*+([^/][^*]*\*+)*/!si" => "",  // Strip multiple comments
        "/\s\s+/"       => " ", // Strip multiple spaces
        "/\}/"          => "}\n"// each style in new line
    );
    $result = preg_replace(array_keys($replace), $replace, $result);

    $replacements = array(
        '{ ' => '{', ' }' => '}', '; ' => ';', ', ' => ',', ' {' => '{',
        '} ' => '}', ': ' => ':', ' ,' => ',', ' ;' => ';'
    );
    $result = str_replace(array_keys($replacements), $replacements, $result);

    return $result;
}

Ich schleif das jetzt schon ein paar Wochen mit mir rum und schau immer wieder drauf, erkenn den Fehler nicht...
Das einzige was mir aufgefallen ist:

Code:

"/\}/"          => "}\n"// each style in new line

Hierbei bleibt die schließende Klammer eben in der eigenen Zeile.

Für Hilfestellungen, Lösungsansätze oder einfach eure Meinungen wäre ich dankbar.

tr0y · 28.01.2011, 14:43

Auch wenn ich hier jetzt wieder ne Fu-Framework Diskussion warscheinlich lostret, warum benutzt du kein CSSTidy ?

Manko10 · 28.01.2011, 14:46

Deine Arbeit in alle Ehren, aber ich würde einfach auf Minify setzen: http://code.google.com/p/minify/
Das ist sehr ausgereift, packt mehrere CSS- oder JS-Dateien zu einer zusammen, cacht den Krams und liefert ihn hübsch kleingemacht aus. Zusammen mit Gzip-Komprimierung kannst du da einiges an Traffic sparen.

Direkt zu deinem Code: das liegt daran, dass du mehrere Spaces zu einem zusammenschrumpfst und dann nach jeder Klammer Zeilenumbrüche einfügst. Deshalb landen manche Leerzeichen am Anfang der nächsten Zeile.

Paul.Schramenko · 28.01.2011, 15:04

Danke Manko.
Werde mal ausprobieren, alle Zeilenumbrüche und sonstige Whitespaces zu entfernen und dann einfach nach einer schließenden Klammer umbrechen, sollte dann eigentlich gehen.
Ich wollte aus dem Grund nichts Fremdes benutzen, sodass ich das zur Laufzeit alles ändern kann. Außerdem sind meine Klassen ziemlich klein und handlich, umfassen grad mal 165 Zeilen inklusive Kommentare.
Minify schau ich mir mal näher an, hört sich an sich mal nicht schlecht an.

Nachtrag:

Zitat:

Zitat von Paul.Schramenko

hört sich an sich mal nicht schlecht an.

Einfach nur lol.

Manko10 · 28.01.2011, 15:07

Bei deiner Lösung wirst du ohne Caching spätestens dann Probleme bekommen, wenn du damit mal größere Dateien verkleinern willst.

Paul.Schramenko · 28.01.2011, 15:47

Ich cache die Dateien ja. Sobald ich ein, nennen wir es mal package erstellet habe (IndexController, indexAction -> indexIndex.css). Wird das Ding auch auf der Platte in "/public/layouts/cached/" abgelegt. wenn ich beispielweise am CSS was ändern muss, lade ich die Änderungen hoch um lösch alle gecachten Dateien die davon betroffen sind, bzw. einfach alle.
Ich hab das am Anfang mal ohne caching gemacht, das ging geschwindigkeitstechnisch echt sowas von gar nicht!

Manko10 · 28.01.2011, 15:55

Minify generiert den Cache automatisch neu, wenn sich die Quelldateien geändert haben.

Paul.Schramenko · 28.01.2011, 15:59

Gut kann ich reinprogrammieren, das sollte auch absolut kein Problem darstellen. Da muss ja einfach die Filetime des generierten files mit den einzelnen Dateien geprüft werden. sollte eigentlich echt nicht schwierig sein. Und wie gesagt, 165Zeielen mit Kommentaren.
Aber minify werde ich mir auf jeden fall mal zu gemüte führen... Danke für den Hinweis.

Paul.Schramenko · 29.01.2011, 16:41

Hat funktioniert. Danke sehr.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] css datei in css datei einbinden	xstefxanx	HTML, Usability und Barrierefreiheit	10	21.03.2009 20:11
[Erledigt] Datei Upload Prüfung auf wav / mp3	mastertnt	PHP Tipps 2009	4	15.02.2009 20:05
Wert in externer Datei speichern	Abakay	PHP Tipps 2008	6	04.12.2008 18:56
Datei per Buttonklick runterladen...	go1denboy	PHP Tipps 2008	7	14.06.2008 20:25
Großer Baum -> Große Datei -> Hohe Ladezeit :(	PsychoEagle	PHP Tipps 2008	7	22.09.2007 12:44
RAR Datei packen	deCoo	PHP Tipps 2007	3	15.05.2007 20:30
.gz Datei entpacken und mit dem Inhalt weiterarbeiten	R4v3r	PHP Tipps 2007	8	02.02.2007 14:49
String als Datei speichern	Zangelo	PHP Tipps 2006	23	25.08.2006 14:13
Datei auf FTP-Server ändern ohne lokal abzuspeichern	faux	PHP-Fortgeschrittene	11	02.09.2005 11:54
Datei mehrmals öffnen und schließen in einem Skript		PHP Tipps 2005-2	14	14.07.2005 18:12
Ordner Struktur auslesen bestimmte datei finden ....	silverghost	PHP Tipps 2005	3	24.05.2005 13:55
Includete Datei nicht gleich ausgeben	Madden	PHP-Fortgeschrittene	1	12.05.2005 00:19
xfdf Datei mit PHP an eMail senden Problem: Leere Datei		PHP Tipps 2004-2	1	07.12.2004 12:25
[Erledigt] datei editieren		PHP Tipps 2004	1	10.09.2004 20:33
(ich schonwieder) Link seite automatisch	imported_DJ Nuno	PHP Tipps 2004	14	19.08.2004 17:42

28.01.2011, 14:22
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	[Erledigt] CSS in eine Datei packen Hallo zusammen, ich habe ein kleines Problemchen, naja es ist eigentlich nicht so schlimm... sieht einfach nur scheiße aus. Zum Problem ich habe mir einen kleinen CSS Packer geschrieben, der mit aus verschiedenen Dateien eine zusammenbauen soll. Beispiel. Alle Seiten: default.css menue.css Seitenspzifiesch: Index: tpl/index.css Impressum: tpl/impressum.css Kontakt: table.css tpl/contact.css Demnach bräuchte ich auf: Index: default.css + menue.css + tpl/index.css Impressum: default.css + menue.css + tpl/impressum.css Kontakt: default.css + menue.css + table.css + tpl/contact.css Die Dateien möchte ich einfach zusammenmergen das geschiet dann Controller-Action spezifisch (bsp. indexIndex.css, indexArchive.css, contactIndex.css, usw.). und diese dann gecached auf der Platte ablegen, sodass beim nächsten Zugfriff diese direkt genommen werden können. Das funktioniert auch größtenteils gut, aber nicht komplett so wie ich es gerne hätte. Hier ein Auszug aus der indexIndex.css Code: body{margin:0;padding:0;font-size:11px;color:#595959;font-family:Arial,sans-serif;} a{outline:none;text-decoration:none;color:#595959;} a:hover{text-decoration:underline;color:#595959;} #headLayer{width:100%;height:100px;float:left;} .clearfix{clear:both;} .clearfixR{clear:right;} .clearfixL{clear:left;} .codeTable{border-spacing:0;padding:0 10px 2px 10px;margin:10px;border:1px solid #595959;width:560px !important;min-width:560px;max-width:560px;background:#EEEEEE url(/public/layouts/images/caro.png) repeat top left;overflow:auto;overflow-y:auto !important;overflow-x:hidden !important; } Wie man sieht sind da teilweise noch Idents vorne, teilweise wird die schließende geschweifte Klammer in der nächsten Zeile dargestellt, usw. Ich finde einfach den Fehler nicht, und ein Fehler muss ja vorhanden sein im Code, sonst würde es richtig dargestellt werden. Hier kommt der Code, der das ganze generiert: PHP-Code: protected function _compressResult() { $result = $this->_result; $replace = array( "!/\[^]\+([^/][^]\+)/!si" => "", // Strip multiple comments "/\s\s+/" => " ", // Strip multiple spaces "/\}/" => "}\n"// each style in new line ); $result = preg_replace(array_keys($replace), $replace, $result); $replacements = array( '{ ' => '{', ' }' => '}', '; ' => ';', ', ' => ',', ' {' => '{', '} ' => '}', ': ' => ':', ' ,' => ',', ' ;' => ';' ); $result = str_replace(array_keys($replacements), $replacements, $result); return $result; } Ich schleif das jetzt schon ein paar Wochen mit mir rum und schau immer wieder drauf, erkenn den Fehler nicht... Das einzige was mir aufgefallen ist: Code: "/\}/" => "}\n"// each style in new line Hierbei bleibt die schließende Klammer eben in der eigenen Zeile. Für Hilfestellungen, Lösungsansätze oder einfach eure Meinungen wäre ich dankbar. __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.01.2011, 14:43
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.874 PHP-Kenntnisse: Fortgeschritten	Auch wenn ich hier jetzt wieder ne Fu-Framework Diskussion warscheinlich lostret, warum benutzt du kein CSSTidy ? __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

28.01.2011, 14:46
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Deine Arbeit in alle Ehren, aber ich würde einfach auf Minify setzen: http://code.google.com/p/minify/ Das ist sehr ausgereift, packt mehrere CSS- oder JS-Dateien zu einer zusammen, cacht den Krams und liefert ihn hübsch kleingemacht aus. Zusammen mit Gzip-Komprimierung kannst du da einiges an Traffic sparen. Direkt zu deinem Code: das liegt daran, dass du mehrere Spaces zu einem zusammenschrumpfst und dann nach jeder Klammer Zeilenumbrüche einfügst. Deshalb landen manche Leerzeichen am Anfang der nächsten Zeile. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

28.01.2011, 15:07
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Bei deiner Lösung wirst du ohne Caching spätestens dann Probleme bekommen, wenn du damit mal größere Dateien verkleinern willst. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

28.01.2011, 15:47
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Ich cache die Dateien ja. Sobald ich ein, nennen wir es mal package erstellet habe (IndexController, indexAction -> indexIndex.css). Wird das Ding auch auf der Platte in "/public/layouts/cached/" abgelegt. wenn ich beispielweise am CSS was ändern muss, lade ich die Änderungen hoch um lösch alle gecachten Dateien die davon betroffen sind, bzw. einfach alle. Ich hab das am Anfang mal ohne caching gemacht, das ging geschwindigkeitstechnisch echt sowas von gar nicht! __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...

28.01.2011, 15:55
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Minify generiert den Cache automatisch neu, wenn sich die Quelldateien geändert haben. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

28.01.2011, 15:59
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Gut kann ich reinprogrammieren, das sollte auch absolut kein Problem darstellen. Da muss ja einfach die Filetime des generierten files mit den einzelnen Dateien geprüft werden. sollte eigentlich echt nicht schwierig sein. Und wie gesagt, 165Zeielen mit Kommentaren. Aber minify werde ich mir auf jeden fall mal zu gemüte führen... Danke für den Hinweis. __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...

29.01.2011, 16:41
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Hat funktioniert. Danke sehr. __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...