Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Machr na PHP - Optimizer CSS stylů

Aktivity
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:8.10.2013 10:39

Ahoj programátoři, v pravidelné minisoutěži o placu a nálepky si tento týden zkusíme naprogramovat optimizer CSS stylů v PHP.

Jak váš web roste, roste s ním i jeho CSS soubor. Takové velké CSSko budete jistě chtít okomentovat a rozdělit do více menších souborů. Ve finále je ale kvůli výkonu potřeba, aby byl výsledný CSS soubor jen jeden a bez komentářů. Právě tuto úpravu vykoná soutěžní PHP skript.

Navrhněte skript, který:

  1. Dostane na vstupu několik CSS souborů
  2. Obsah těchto souborů minifikuje (odstraní komentáře a bílé místo, samozřejmě tak, aby soubor nerozbil)
  3. Vrátí jeden velký výsledný CSS soubor

Tipy: Zadání není těžké. Snažte se o objektovou aplikaci. Prohlížeč nemusí soubor s příponou .php cachovat, je nutné mu v hlavičce sdělit, aby to dělal.

Čas si dejme do neděle 13.10.2013 do 18:00. Vítěz získává placku na batoh, samolepky a ocenění do profilu :)

Odpovědět
8.10.2013 10:39
You are the greatest project you will ever work on.
Avatar

Člen
Avatar
:8.10.2013 13:59

Konečně něco, čeho se můžu zůčastnit :)

 
Nahoru Odpovědět
8.10.2013 13:59
Avatar
Michal Žůrek - misaz:8.10.2013 14:58

Jinak kdy by neměl nějaké css, tak můžete použít moje z webu misaz.moxo.cz
Ve složce styles jsou styly (viz. obr). U těchto stylů si však doplňte komentáře pro zkoušení.

 
Nahoru Odpovědět
8.10.2013 14:58
Avatar
Odpovídá na David Hartinger
Neaktivní uživatel:8.10.2013 15:51

Vypadá zajímavě :P Dáváš za tohle i placku na algoritmy nebo jen na PHP ?

Nahoru Odpovědět
8.10.2013 15:51
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:8.10.2013 15:53

pokud nepoužiješ regex tak asi jo.

 
Nahoru Odpovědět
8.10.2013 15:53
Avatar
Nahoru Odpovědět
9.10.2013 19:50
Neaktivní uživatelský účet
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
David Dostal:9.10.2013 20:28

Hezké. Ještě by se to ale dalo vylepšit. Kupříkladu <code>nav ul</code> se ti optimalizuje jako <code>navul</co­de>.

Editováno 9.10.2013 20:29
 
Nahoru Odpovědět
9.10.2013 20:28
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:10.10.2013 7:17
content: 'V textu jsou /* komentáře chápany jako text... */';

...a mezery v textu to také odstraní...

Editováno 10.10.2013 7:19
Nahoru Odpovědět
10.10.2013 7:17
Neaktivní uživatelský účet
Avatar
Nahoru Odpovědět
10.10.2013 12:15
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz:12.10.2013 8:56

Tak přidávám sem svůj výtvor: http://misaz.moxo.cz/…ptimizer.zip Pokud se vám bude jevit výsledek nezoptimalizovaný, zakomentujte/od­komentujte řádek 70 v souboru CSSOptimizer.php. Používá se to jednoduše.

Naimportujete si soubor CSSOptimizer.php, vytvoříte instanci třídy CSSOptimizer.php, volitelně ji předáte pole stringů se styly. Dále můžete naimportovat všechny csska ze složky metodou loadStylesFrom­Folder("složka"). Výsledek vypíšete (nečekaně) metodou Vypis() .

Ukázka použití (soubor style.php):

require_once("CSSOptimizer.php");
$styl = new CSSOptimizer();
$styl->loadStylesFromFolder("css");
$styl->Vypis();
 
Nahoru Odpovědět
12.10.2013 8:56
Avatar
FastNode
Tvůrce
Avatar
FastNode:13.10.2013 17:55

Prosím ještě chvíli, už finishuju.

Bohužel to asi nestihnu, bude vadit, když to nebude umět spojovat více css souborů?

Editováno 13.10.2013 17:57
 
Nahoru Odpovědět
13.10.2013 17:55
Avatar
Odpovídá na FastNode
Michal Žůrek - misaz:13.10.2013 17:56

Máš na to necelé 4 minuty :D

 
Nahoru Odpovědět
13.10.2013 17:56
Avatar
FastNode
Tvůrce
Avatar
FastNode:13.10.2013 18:04

Ok. Moje první objektová aplikace a první soutěž. Čekám hlavně kritiku, díky které se budu moci příště zlepšit.

http://www.itnetwork.cz/dev-lighter/228

Teď jsem zjistil, že procházení složek mi nefunguje, takže se s tím ani nezatěžujte, umí to zpracovat pouze samostatné css.

Editováno 13.10.2013 18:07
 
Nahoru Odpovědět
13.10.2013 18:04
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
David Hartinger:13.10.2013 18:16

Nikde tu nevidím tvůj zdroják.

Nahoru Odpovědět
13.10.2013 18:16
You are the greatest project you will ever work on.
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na FastNode
FastNode:13.10.2013 18:21

Ještě jsem to upravil, což je zřejmě proti pravidlům. Takže už to zpracovává samostatný css, složku s css a pole s názvy css. Komentáře jsem fakt nestihl přidat.

Editováno 13.10.2013 18:22
 
Nahoru Odpovědět
13.10.2013 18:21
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na FastNode
David Hartinger:13.10.2013 18:29

Ještě čekám na kód od Neaktivní uživatela. U tebe úplně nechápu, proč "zachraňuješ" text mezi uvozovkami?

Nahoru Odpovědět
13.10.2013 18:29
You are the greatest project you will ever work on.
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na David Hartinger
FastNode:13.10.2013 18:36

Protože hned poté vyhazuju bílé znaky a při větším počtu mezer je zkracuji na 1. Tím bych ovšem ovlivnil i text v uvozovkách. Snažil jsem se to napsat tak, aby veškerý obsah v uvozovkách zůstal v původním tvaru. Takže nejdřív si vše z uvozovek vytáhnu do pole, pak zbytek pročistím a potom do těch uvozovek ten text vrátím v původním tvaru.

Např. kdyby někdo zešílel a napsal třeba p:before { content:"A   H O     J­"; } tak se snažím mu vrátit p:before{conten­t:"A   H O     J­"} a nikoliv p:before{content:"A H O J"}

Snad jsem to srozumitelně vysvětlil

Editováno 13.10.2013 18:39
 
Nahoru Odpovědět
13.10.2013 18:36
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na FastNode
David Hartinger:13.10.2013 18:38

Nenapadá mě proč bych do uvozovek v CSS psal mezeru?

Nahoru Odpovědět
13.10.2013 18:38
You are the greatest project you will ever work on.
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na David Hartinger
FastNode:13.10.2013 18:40

Ani mě ne. Ale přesto si myslím že by ten skript neměl nijak upravovat obsah v uvozovkách, možná jsem jenom uvedl špatný příklad.

 
Nahoru Odpovědět
13.10.2013 18:40
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na David Hartinger
FastNode:13.10.2013 18:47

někdo může použít v content třeba hvězdičku a u ní mezeru, která by se jinak odstranila

 
Nahoru Odpovědět
13.10.2013 18:47
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na FastNode
David Hartinger:13.10.2013 18:48

Máš pravdu, blbnu, mezera tam samozřejmě může být, třeba u názvů fontů. Řešil bych ale spíše kdy mezeru můžu vymazat než je vymazat všude a pak vrátit obsah uvozovek. Smazat je potřeba vlastně jen více mezer zasebou nebo mezery za : a před {.

Nahoru Odpovědět
13.10.2013 18:48
You are the greatest project you will ever work on.
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na David Hartinger
FastNode:13.10.2013 19:02

Mezery zkracuju na jeden znak v kódu, v uvozovkách se snažím nechat vše na místě.

Je to prasárna, ale když někdo udělá dvě mezery "  " tak se mu snažím vyhovět tím, že je tam nechám. Jen k tomu jsou funkce saveText a recoverText. Pokud někdo nepíše jako prase a nemá třeba "/*", tak je může vypustit.

 
Nahoru Odpovědět
13.10.2013 19:02
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:13.10.2013 19:09

Každopádně už jsme tedy asi všichni.

Danovi to maže mezery všude. Snaha se cení, ale již jsem ti říkal asi tisíckrát, že "Uprav" není vhodný název pro třídu :) Třída je objekt, ne akce.

Misaz pěkně načítá vše ze složky, kód se zdá objektový. Splitování na selektory mi přijde trochu zbytečné.

FastNode na to šel poměrně brutální metodou saveText, kde je kód dost redundantní a hlavně by to určitě zvládl regulární výraz. deleteUselessChar() se mi naopak líbí, je dobře kompaktní. Škoda té zmatenosti s uvozovkami, která asi není ani potřeba a také neexistující možnosti procházet více souborů.

Zrovna to implemnetuji na devbooku a myslím, že by mělo bohatě stačit tohle:

// Odstranění komentářů
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Odstranění některých mezer
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace(', ', ',', $buffer);
// Odstranění konců řádků
$buffer = str_replace(array("\r\n", "\t", "\r", "\n"), '', $buffer);

Ještě to testuji, ale vypadá to ostylované dobře :)

Nějak se nemohu rozhodnout mezi Michal Žůrek - misazem a FastNode, tak vám ji pošlu oběma :) Adresu prosím pošlete x do PM a FastNode si nějak upraví ty for cykly :P

Nahoru Odpovědět
13.10.2013 19:09
You are the greatest project you will ever work on.
Avatar
FastNode
Tvůrce
Avatar
Odpovídá na David Hartinger
FastNode:13.10.2013 19:28

Skvělé, děkuji. S tím kódem si ještě nějak pohraju, dneska to bylo narychlo (ráno v 1:00 -> poté v autě -> metru -> autobuse a u večeře už jsem finišoval :D).

 
Nahoru Odpovědět
13.10.2013 19:28
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:13.10.2013 19:45

Tak já už jednu fyzickou placku na PHP mám a nenapadá mě žádná, která by se k tomu hodila a ještě ji nemám. Fyzickou placku mi ted posílat nemusíte, staří mi když mi ji napíšete do profilu.

Jinak já jsem na svém webu taky script implementoval.

 
Nahoru Odpovědět
13.10.2013 19:45
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:13.10.2013 19:49

Dobře, v profilu jí už máš :)

Nahoru Odpovědět
13.10.2013 19:49
You are the greatest project you will ever work on.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 26 zpráv z 26.