Wygrzebane z GitHuba (1) : CSS Crush

Od jakie­goś czasu grze­bię sobie po GitHu­bie. Pomy­śla­łem, że rozpocznę cykl opisów skryp­tów, które wzbu­dziły moją cieka­wość lub wg mnie mogą być dosyć przy­datne dla webma­ste­rów. Na pierw­szy ogień idzie CSS Crush — narzę­dzie do auto­ma­tycz­nego zmniej­sza­nia wiel­ko­ści plików CSS.

Zapewne każdy kto szukał kiedyś możli­wo­ści zaosz­czę­dze­nia nieco trans­feru natknął się na różne programy do minia­tu­ry­za­cji skryp­tów. Chyba najpo­pu­lar­niej­sze narzę­dzie to YUI Compres­sor, które przyj­muje pliki Java­Script lub CSS i próbuje powy­rzu­cać trochę „niepo­trzeb­nych” znaków. Minu­sem w/w programu jest to, że jest napi­sany w Javie. Co prawda powstał port w Java­Script, ale powiedzmy, że szukamy wygod­niej­szego rozwią­za­nia, które daje się rozszerzać.

CSS Crush to właści­wie jedna klasa plus kilka­na­ście funk­cji (makr) rozbu­do­wu­ją­cych. To trochę dziwna klasa, bo WSZYSTKO mamy statyczne. Nawet mnie się to nie podoba, no ale niech będzie. Widocz­nie autor ma ważne podstawy żeby tak robić.

Używa się tego bajecz­nie prosto. Gdzieś wcze­śniej żądamy dołą­cze­nia pliku CSS_Crush.php, a następ­nie w sekcji head gdzie linku­jemy nasz kod CSS wystar­czy wpisać

<link rel="stylesheet" type="text/css" href="<?php echo CSS_Crush::file('/styles/style.css'); ?>">

i właści­wie tyle. Skrypt sam sobie utwo­rzy zmini­ma­li­zo­wany plik i zwróci do niego ścieżkę dostępu. Jest to na tyle sprytne, że jeżeli nie wpro­wa­dza­li­śmy żadnych zmian do pliku źródło­wego CSS, to skrypt nie będzie mielił go ponownie.

Proces minia­tu­ry­za­cji pliku prze­biega w zasa­dzie zgod­nie z tym co robi YUI Compres­sor, czyli m.in. wywa­la­nie zbęd­nych ente­rów, spacji, śred­ni­ków, nadmia­ro­wych zer i zamianę kolo­rów poda­nych w rgb na hexy.

CSS Crush można również rozsze­rzać o makra. Aktu­al­nie dostępne są ułatwia­cze w stylu auto­ma­tycz­nego doda­wa­nia -moz- i -webkit- oraz doda­wa­nie kilku hacków.

Progra­mem można stero­wać poprzez doda­nie mu tablicy asocja­cyj­nej jako drugiego argu­mentu przy CSS_Crush::file. Są to boole­any 'macros', 'comments', 'minify' i 'versioning'. Jako swego rodzaju manka­ment można uznać formułkę, która wyświe­tla się na początku każdego zmie­lo­nego pliku. Zapro­po­no­wa­łem auto­rowi doda­nie opcji 'boilerplate', za pomocą której wywa­limy nagłó­wek pliku.

Chyba jest o co walczyć, skoro plik CSS Gazety.pl z 77,6 KB zmniej­szył się do 67 KB. Ta wartość razy kilka­set tysięcy odwie­dzin jakieś oszczęd­no­ści na trans­fe­rze nam zapewni.

Aktu­ali­za­cja (25.05.2011) : Autor zatwier­dził mój pull requ­est, więc od teraz opcja 'boilerplate' już oficjalnie.

Podobne wpisy:

  1. Wygrze­bane z GitHuba (6) : Monolog
  2. Wygrze­bane z GitHuba (3) : Validation
  3. Wygrze­bane z GitHuba (4) : PHP User Agent
  4. Wygrze­bane z GitHuba (2) : Imagine

One comment

  • 25 maja 2011 - 07:26 | Permalink

    Wiele jest narzę­dzi takiego typu — osobi­ście wole podej­ście, że CSS jest mini­ma­li­zo­wany w momen­cie „builda” — jakimś phin­giem czy czymś w tym stylu.

    Ale pomysł na serię bardzo dobry — czekam na następną edycję :)

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.

    Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong>