21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Venca V
Profil
Ahoj všem,
postupem času jsem se asi jako každý, pro koho je kodéřina denním chlebem, propracoval k nějakému "workflow", se kterým úzce souvisí i používání výchozí "kostry" projektu, kterou mám připravenou, průběžně aktualizuji a každý nový projekt s ní začínám. Postupem času jsem si k tomu přidával věci, které mi kódování šablon urychlí a zpříjemní, výsledkem je takový můj "framework", který používám. Je to kombinace PHP, JS, Node JS a Gruntu, kde je ve výsledku radost kódovat. Rád bych měl feedback i od jiného kodéra, takže uvítám, kdyby se na to chtěl někdo mrknout a otestovat to.

Je pro to potřeba mít nainstalované PHP verze 5.4+, NodeJS a Grunt - kdyby se tady našel nějaký "betatester", tak napište sem, trochu bych to učesal a hodil třeba na Github.

A níže tedy stručný popis:
- je to připravená "kostra" stránky, která obsahuje všechny potřebné věci, které v 99% na projektech používám - jQuery, Modernizr, LESS zdrojáky Bootstrapu, hlavní LESS soubor, kde se importují potřebné moduly Bootstrapu + připravené prázdné LESS moduly, CSSko pro IE8. Obsahuje také "placeholdery" pro faviconu, Apple ikony...
- je to napsané v PHP, aby se daly jednoduše používat společná hlavička/patička, případně jiné společné části stránky napříč šablonami.

A jak to funguje:
- jedním příkazem z příkazové řádky se spustí PHP server a zároveň se otevře okno prohlížeče, kde vidím úvodní stránku projektu.
- zároveň se spustí sledovací režim, takže jakmile něco změním v LESS souborech, zkompilují se CSSka a automaticky se reloadne stránka/stránky v prohlížeči. Prohlížeč se reloadne také při změně v PHP souborech.
- při kódování mám možnost vypnout Media Queries - což je první věc, kterou dělám; zapínám až později.
- kóduju, kóduju a kóduju.
- když mám dokódováno, tak dalším jedním příkazem z příkazové řádky vygeneruju archiv s projektem, HTML šablony a také stránku s přehledem projektu pro klienta, s odkazem na šablony a archiv ke stažení.
joe
Profil
Rád vyzkoušim..
kaktuss
Profil
Tiez som zvedavy.
RockFire
Profil
Taky bych se rád podíval ;)
Venca V
Profil
Díky,
pošlete mi prosím maily na vaclavvracovsky@gmail.com a já vám to pošlu, není to (zatím:-D) takový zázrak, abych to dával někam úplně veřejně.

Vznikalo to během let trochu živelně, jednou za čas jsem kousek připsal/přepsal, ty zdrojáky nejsou zrovna krásné (nejsem programátor), ale o to mi momentálně ani nejde, takže určitě si můžete ušetřit připomínky, že PHP není zrovna konzistentní - vím o tom a do budoucna na tom určitě zapracuju. I ta stránka přehledu je moje dílo i po grafické stránce, časem možná zaúkoluji nějakého grafika.

Jde mi o to, aby si to vyzkoušel i někdo jiný - mně práce s tím maximálně vyhovuje, ale nejsem v tom samozřejmě objektivní.

Postup:
1. $ npm install (pouze poprvé, při další práci už není potřeba)
2. $ grunt
3. Píšu HTML v souboru php/index.php, případně upravuji hlavičku/patičku v php/common
4. V HTML/project/_ui/css/main.less si naimportuji potřebné Bootstrap moduly, vlastní moduly a ty upravuji
5. Přidávání dalších šablon se dělá v prohlížeči na stránce s přehledem, případně ručně, zkopírováním php/index.php a uložením pod jiným názvem.
6. Po skončení kódování $grunt export - vygenerují se HTML šablony, HTML stránka s přehledem pro klienta a také se vytvoří archiv, kde je to celé zabalené.
joe
Profil
Venca V:
Vypadá to zajímavě, ale popíšu první pocity z toho, jaké se mi to zdá, ikdyž jsem to vlastně nerozchodil na 100 % :-) vyčetl jsem z Gruntfile.js a popisu, jak to funguje.

Při spuštění gruntu končím na chybě Fatal error: spawn ENOENT. Modul grunt-php jsem nikdy nepoužíval a přiznám se, že ani nevím k čemu přesně je (tyto věci vždycky šly kolem mě - mám nainstalovaný Apache, takže PHP mi funguje, to by snad mělo stačit, ne? A nebo k čemu další PHP server? Jinak se tam tedy určuje i port, takže nemůžeš pracovat na více projektech zároveň - tj. musíš si hlídat, aby se ti ty porty nehádaly?).

Osobně pracuju v mých oblíbených NetBeans, takže watcher pro LESS soubory nemusím nastavovat a funguje to automaticky. Soubory .less a .css bych dal do zvláštní složky.

Nevšiml jsem si řešení pro více JS souborů a nebo všechno píšeš do document ready? Načítání minimalizovaných souborů mám pocit také chybí.

Ve výsledných HTML souborech je první řádek prázdný, doporučuju odmazat :-)

Určitě je to věc, která usnadní práci. Myslím ale, že vy v Medio Interactive se netajíte tím, že pracujete na Nette, tak se jenom zeptám - nebylo by jednodušší to všechno stavět už nad Nette než takovým způsobem a pak to zase lepit do jiného frameworku do PHP?
Venca V
Profil
Škoda, vypadá to na nějakou chybějící systémovou proměnnou, píšu si do issues:-)

joe:
Modul grunt-php jsem nikdy nepoužíval a přiznám se, že ani nevím k čemu přesně je (tyto věci vždycky šly kolem mě - mám nainstalovaný Apache, takže PHP mi funguje, to by snad mělo stačit, ne? A nebo k čemu další PHP server?

Samozřejmě se na to dá přistoupit i skrze Apache, ten PHP server se tam spouští kvůli automatického reloadu stránky při úpravě CSS/PHP, což je pro mě návyková fičura:-)

Jinak se tam tedy určuje i port, takže nemůžeš pracovat na více projektech zároveň - tj. musíš si hlídat, aby se ti ty porty nehádaly?).
To je pravda, souběžně na více projektech zároveň pracovat nemůžu, ale to ani nedělám. Když dodělám práci na jednom, prostě ukončím server, přelezu si v command lajně do složky s další projektem, spustím, a jedu dál.

Osobně pracuju v mých oblíbených NetBeans, takže watcher pro LESS soubory nemusím nastavovat a funguje to automaticky.
Taky byly dlouhou dobu mým oblíbeným IDE, ale po anabázi s neúspěšným řešením jejich memory leaků jsem je po letech opustil. A kdo okusí Sublime text, už nechce jinak:-)

Soubory .less a .css bych dal do zvláštní složky.
Máš pravdu.

Ve výsledných HTML souborech je první řádek prázdný, doporučuju odmazat :-)
Opravím, díky.

Nevšiml jsem si řešení pro více JS souborů a nebo všechno píšeš do document ready? Načítání minimalizovaných souborů mám pocit také chybí.

Určitě je to věc, která usnadní práci. Myslím ale, že vy v Medio Interactive se netajíte tím, že pracujete na Nette, tak se jenom zeptám - nebylo by jednodušší to všechno stavět už nad Nette než takovým způsobem a pak to zase lepit do jiného frameworku do PHP?

Odpovědi na dvě předchozí citace spolu souvisejí - pochází to ještě z doby, kdy jsem převážně kódoval HTML šablony pro klienty, a nedělal jsem ještě v Mediu, takže výsledek mojí práce bylo prostě HTML+CSS, zbytek si klient nasadil v aplikaci sám. V mediu se zase v Nette používá Webloader, takže se o spojování a minifikaci JS/CSS starat nemusím. Zavedený postup je takový, že si udělám šablony v tomhle, což je pro mě nejpohodlnější a nejefektivnější, a výsledné HTML/LESS se pak přenese do samotné aplikace. Od toho okamžiku už se pak samozřejmě pokračuje jen v aplikaci, protože je nesmysl udržovat zároveň dvě verze kódu.

Ale to spojování JS tam výhledově asi také přidám. Každopádně díky za feedback!
Jan Tvrdík
Profil
Venca V:
Škoda, vypadá to na nějakou chybějící systémovou proměnnou, píšu si do issues:-)
Spíš nemá PHP v PATH.
Str4wberry
Profil
Na živé promítání změn přece stačí jen nějaký plugin do prohlížeče.
Venca V
Profil
Str4wberry:
Na živé promítání změn přece stačí jen nějaký plugin do prohlížeče.

Jasně, pro chrome je to taky řešení. Ale nejde o jednotlivé funkcionality - všechno už někdo/někde udělal lépe, tohle je prostě moje "sbírka" technologií, postupů, scriptů etc., které mi společně dělají kódování radostnějším a rychlejším, abych pak mohl více času strávit důležitějšími věcmi, jako třeba prokrastinací:-)
Venca V
Profil
Jan Tvrdík:
Spíš nemá PHP v PATH.

Díky, potvrzuji, je to tak.
joe
Profil
Jan Tvrdík:
Taky potvrzuju, bylo to tím (problém jsem zkoušel hledat, ale už jsem se předtím nedostal, abych to vyzkoušel).

Venca V:
Pak mi ještě nefungovalo to živé obnovení při změně, ale to asi zase bude nějaký problém u mě - neřeším to.

Jinak je to (pro tebe určitě) dobrý způsob, osobně to dělám tak, že nakopíruju složku s čistým CMS do složky, kde projekt bude, vytvořím v NetBeans nový projekt (teď také podporují live reload) a začínám pracovat na novém projektu. Osobně používám příkazovou řádku co nejméně (vyrostl jsem na Windows, ikdyž vim, že práce s ní je efektivní).

Máš pak zvykem psát CSS do zvláštních souborů a nebo už jenom edituješ main.less?

Taky byly dlouhou dobu mým oblíbeným IDE...
Pravda, jsou trochu pomalejší...

se zase v Nette používá Webloader
Už jsem z dob lehkého Nettování zapomněl, jak tato komponenta funguje. Ale brzy se k ní asi taky dostanu, pravděpodobně provede spojení více souborů do jednoho.
Venca V
Profil
joe:
Osobně používám příkazovou řádku co nejméně (vyrostl jsem na Windows, ikdyž vim, že práce s ní je efektivní).

Taky jsem se jí dlouho zdráhal používat, ale poté, co jsem byl okolnostmi donucen si s ní trochu začít, zjistil jsem, že je to fajn věc, nejen pro Git:-)

Máš pak zvykem psát CSS do zvláštních souborů a nebo už jenom edituješ main.less?
V main.less jen importuju jednotlivé moduly, je to pak přehlednější, viz třeba složka modules z jednoho projektu:

29.10.2013  13:28               221 bootstrap.less
16.10.2013  08:47             1 050 common-boxes.less
16.10.2013  08:47               689 common-footer.less
29.10.2013  15:36             1 470 common-header.less
29.10.2013  14:55             4 167 common-sidebar.less
29.10.2013  16:27             4 930 common.less
29.10.2013  16:28               491 responsive-lg.less
29.10.2013  15:43               852 responsive-md.less
29.10.2013  15:56             2 386 responsive-sm.less
16.10.2013  08:47                40 responsive-xs.less
Kcko
Profil
Venca V:
Můžu OT? Proč je použit Less? Má nějaké výhody např. vůči Sassu?
Venca V
Profil
Kcko:
Můžu OT? Proč je použit Less? Má nějaké výhody např. vůči Sassu?

Můžeš:-) Je tam kvůli Bootstrapu, jinak výhody/nevýhody IMHO nemá. Dřív jsem používal Stylus, ale po rozhodnutí přejít na Bootstrap už jiný preprocesor nedával smysl.
Kcko
Profil
Venca V:
Jasný, na Stylus sem koukal a moc se mi nelíbil, prvně jsem začal Lessem, ale když jsem objevil Compass nebylo co řešit.
Venca V
Profil
Po čase bych zase ocenil nějaký ten feedback, kdyby si to chtěl někdo vyzkoušet, už to nějakou dobu visí na GitHubu: https://github.com/VencaV/cssframework

Requirements jsou v Readme, z minula jen upozorním, že je potřeba mít PHP v path (postup pro windows: http://stackoverflow.com/questions/7307548/how-to-access-php-with-the-command-line-on-windows )

Dobrovolníkům předem děkuji.
Kcko
Profil
Venca V:
Nedíval jsem se na to, nemám ted moc čas, jen by mě zajímala jistá věc. Připravuji si podobné workflow a řeším "neřešitelné":

Pokud si přes bower natahám balíčky, které v sobě mají vazby na svoje obrázky, fonty atd jak s tím naložit do buildu?

Mám připravený poněkud kostrbatý postup:

z bower_components si nakopíruji dle nastavených pravidel v Gruntfile.js potřebné věci (většinou dist adresáře, kde je ta struktura nějak ploše u sebe - css, js, vendor věci (fonty, obrázky..)).
Potom přes pluginy replace_css nebo replace_url nahradím cesty ve všech JS a CSS souborech a pak teprve vybuildím (spojím a zminifikuji -> finální build).

Jestli to tam máš nějak zanesené tak se na to určitě podívám. Dlouho jsem googlil a vymýšlel a na nic lepšího jsem nepřišel. Navíc mi vadí, že každý balíček v boweru má jinou strukturu a je nutno si všechno napsat ručně (tj 1 balíček = x pravidel).

Vaše odpověď

Mohlo by se hodit

Pokuste se již v titulku uvést název programu související s tématem.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0