Kódovací "framework"

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í.

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é.

Š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!

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í:-)

Jan Tvrdík:
„Spíš nemá PHP v PATH.“

Díky, potvrzuji, je to tak.

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:

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.

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.