CSS Minifier für YAML Framework

[Schnoop]

Hallo zusammen,

ich bin momentan mit einer Webseite beschäftigt die nach dem Launch so einige PIs zusammenbringen wird.
Aus diesem Grund liegt bei der Entwicklung das Augenmerk unter anderem auch auf der Reduzierung von css Dateigrößen.

Bei der Entwicklung ist die modulare Struktur der YAML css Files absolut hilfreich. Auf dem Produktivsystem hingegen soll nur 1 css Datei vorhanden sein.

Der Gedanke der dahinter steht ist dass bei jedem deploy der Webseite eine neue minified css Datei erstellt werden soll die dann auf dem Livesystem landet.

Dabei ist folgender Codeschnipsel im Anhang abgefallen der diese Arbeit übernimmt.
Vielleicht kann der eine oder andere damit ja was anfangen.

Fragen oder Anmerkungen? Gerne hier.

Gruß

Schnoop

[djesse]

Hallo Schnoop,

Klasse Arbeit. Vielen Dank dafür. Ich bin nur PHP-Laienkünstler, aber auf den ersten Blick sieht der Code sehr sauber und übersichtlich aus und wie ich sehe, hast Du sogar bereits an das Entfernen doppelter @charset-Regeln gedacht.

Daher gleich mal ein Aufruf an alle Forenuser mit ausreichend PHP-Erfahrung. Testet das Script bitte an so viel wie möglich.

Gruß
Dirk

[hieblmedia]

Hallo,
saubere arbeit.
Werde ich demnächst unbedingt testen. Bin gespannt.

Gruß
Reinhard

[befi]

Hallo Schnoop,

ich habe Dein Script getestet. Dazu ein paar Anmerkungen:

1. damit das Script auch unter XAMPP unter Windows funktioniert, habe ich in Yaml_Deploy.php an folgenden Stellen die '\' in '/' umgesetzt:

  public function setCssDirectory( $strCssDirectory = false ) {
   $strCssDirectory = str_replace('\\','/',$strCssDirectory);
   $this->strCssDirectory = $strCssDirectory;
  }

   $this->strCssDirectory = realpath( $this->strCssDirectory );
   $this->strCssDirectory = str_replace('\\','/',$this->strCssDirectory);

   $strFile = realpath( $strDirectory . '/' . $strFile );
   $strFile = str_replace('\\','/',$strFile);

2. bei der Umsetzung von @media screen,projection tritt irgendwo ein Fehler auf, da dies hier erzeugt wird:

*/@media screen,projection{body{background: #4d87c7 url("../../images/bg_blue.png") repeat-x top left fixed;padding:10px 0}

Durch '*/' ist der Code nicht valide. Der Rest sieht ok aus.

Nachtrag:

bei media werden auch 2 } hintereinander erzeugt:

#col3,#col3_content{width:100%;margin:0;padding:0;border:0}}@media print{#col1{display:none}

gruss
befi

[Schnoop]

Hi Befi,

Danke für dein Feedback.
Anstatt die Backslashes zu replacen könntest du die Konstante DIRECTORY_SEPARATOR verwenden. Diese enthält, abhänging vom OS immer den richtigen Slash.
Ich habe dieses Problem in der neuen Version repariert.

Das mit dem nicht validen Code konnte ich jetzt nicht nachvollziehen. Ich hab das SimpleProject von der yaml Seite genommen und Minified. Danach war der Code valide.
Das er eventuell zwei geschweifte Klammern im Code hat ist ja okay, da die @medias ja teilweise auch in einander verschachtelt sind.

Ich muss dazu sagen das der eigentliche Minifier, ja nicht aus meiner Feder ist. Ich hab mich nur um das kombinieren in eine Datei gekümmert.

Gruß

Schnoop

[befi]

Hallo Schnoop,

Ich habe dieses Problem in der neuen Version repariert.

Gibts es die irgendwo?

Ich hab das SimpleProject von der yaml Seite genommen und Minified

Ich habe mit den Examples getestet.

Gruss
befi

[Schnoop]

Nein die neue Version gibt es noch nicht.
Sobald sie fertig ist, werde ich euch informieren.

[rethus]

Wäre doch klasse, wenn die YAML entwickler sich die Mühe machen würden, und das System so umstellen, dass man dass entsprechend selbst vor dem erstellen des Layouts währeln kann, ob man viele einzelne CSS-Files, oder eine große haben will.

Nichts gegen kommentare in Files, aber in den CSS-Files wird es meiner Meinung nach stark übertrieben... und dann auch noch deutsch und englisch...

Hoffe das wird bald rausgenommen. Finde es besser, wenn man selbst wählen kann, ob und in welchem Umfang die CSS-Files mit Kommentare bestückt werden!

[RedTurtle]

@Schnoop:
Die Idee zum CSS Minifier ist super und der beste Ansatz um css Ladezeiten zu reduzieren. Das Resultat wird sicher etwas "unleserlicher", aber man hat ja immer noch die Quell-CSS-Dateien...

Ich sehen den Nachteil bei Webseiten mit unterschiedlichen Layouts (siehe z.B. diesen post: http://forum.yaml.de/index.php?topic=8282.0). In diesem Fall gibt es für jeden Bereich eine CSS Minifier Datei. Oder?

@rethus:
Ich finde die Kommentare Klasse denn sie bilden die Grundlage zum Verständnis... Falls YAML Builder eine "Kommentarlose" Option anbieten würde wäre das sicher auch nicht schlecht. Ist aber auch nicht tragisch die Kommentare von Hand zu entfernen. Ich stimme Dir jedoch zu dass die "Komentarlose Option" "nice to have" ist.