Adresářová struktura – less
- marau
- Člen | 50
Zdravím,
po delší době studování, pročítání a dalších úprav jsem se rozhodl přejít z čistého css na less. Syntax jazyka a bootstrap už celkem zvládám a na některých menších projektech jsem ho již použil (kompilovaný přes grunt). Nyní se snažím vymyslet adresářovou strukturu pro jeho začlenění do stávajícícho systému, na kterém běží složitější projekty. Co jsem tak pochopil tak by less soubory neměly / nemusejí být uploadovány na ostrý server do viditelných adresářu a tak (z mého pohledu) nemají co dělat v adresáři www. Zároveň mám však asi v hlavě zakořeněneou bariéru, kde less je pro mě, co se umístění týče, stále css. Na kompilaci a správu less chci použít webloader (jsem na něj zvyklý).
Nyní mám celkem standardní strukturu nette:
- app
- vendor
- twbs
- bootstrap
- twbs
- vendor
- www
- admin
- css
- less???
- web1
- web2
- … další složky, které nejsou důležité
- admin
Mám tedy několik otázek:
- Jakou používáte strukturu? Máte less soubory v adresáři less ve www (a zamezen přístup pro čtení třeba přes .htacess) nebo je máte umístěné jinde?
- instalujete twitter/bootstrap přes composer? Nebo by se nemělo css/js/php ve složce vendor vůbec míchat?
- jak importujete třeba bootstrap less soubory do svých? Pomocí importů? Uvádíte relativní cestu nebo jde do less dostat třeba proměná s absolutní cestou k boostrapu?
- je používání less přes webloader dobrý přístup? Nebo je lepší kompilovat a přes webloader si spravovat již zkompilovaná css?
- marau
- Člen | 50
Ok, to je asi dobrý postup. Verzovat pouze less soubory, z nich nechat
generovat csska, která se nahrávají na ostrý server. Tyto css se již na
serveru automaticky minifikují přes filtry webloaderu. Jen si ještě nejsem
jist, zda na generování používat netbeans a nebo zůstat u gruntu přes
příkazovou řádku. A také jsem si ještě nedal dohromady tu adresářovou
strukturu, kam nahrávat less soubory.
Asi zůstanu u www/název_projektu/less.
- David Matějka
- Moderator | 6445
Jakou používáte strukturu? Máte less soubory v adresáři less ve www (a zamezen přístup pro čtení třeba přes .htacess) nebo je máte umístěné jinde?
ano, mam je ve www, nijak to ani neblokuju (a kdybych chtel, tak proste to excludnu v deploy scriptu)
instalujete twitter/bootstrap přes composer? Nebo by se nemělo css/js/php ve složce vendor vůbec míchat?
pres bower
jak importujete třeba bootstrap less soubory do svých? Pomocí importů? Uvádíte relativní cestu nebo jde do less dostat třeba proměná s absolutní cestou k boostrapu?
ano, pomoci @import s relativni cestou
je používání less přes webloader dobrý přístup? Nebo je lepší kompilovat a přes webloader si spravovat již zkompilovaná css?
builduju pomoci gruntu, webloader mam jen na to, aby tam pridalo tu verzi :)
- marau
- Člen | 50
Je nejak fatalne spatne to instalovat pres composer? Vím, že composer je primárně určen pro frontend, ale nějak mi v tom případě uniká, proč je bootstrap vůbec přes composer možné instalovat. Jinak @matej21 , mohu te poprosit o tvou adresářovou strukturu po začlenění boweru? Spravuješ si závislosti zvlášť pro každý modul (admin, frontend1, frontend2) nebo máš vše dohromady v nějakém sdíleném adresíři. Možná se ptám naprosto dementně, ale nechci v tomhle dělat chyby už od začátku. Já se snažím co možná nejvíce knihoven načítat z cdn repozitářů a tam mi použití boweru pro instalaci čehokoliv jiného než bootstrapu a dalších less fw/mixinů atd … uniká.
Jinak ještě druhý dotaz ohledně gruntu. Máš na kompilaci udělané nějaké workflow? Nechce se mi po každé editaci less pouštět příkazovou řádku, určitě to půjde jednodušeji :)
Díky za odpověď
- Oli
- Člen | 1215
Já se snažím co možná nejvíce knihoven načítat z cdn repozitářů a tam mi použití boweru pro instalaci čehokoliv jiného než bootstrapu a dalších less fw/mixinů atd … uniká.
Tak bower je composer pro frontend. Jde o to, že ti pohlídá závislosti. Proto třeba přes bower nainstaluješ 4 knihovny a mělo by ti to stáhnout takovou jQuery verzi, která vyhovuje všem knihovnám. Pokud to stahuješ z cdnky, tak si musíš ty závislosti pohlídat sám. Taky jsem používal cdn, ale pak když jsem jel někam vlakem zjistil, že nemůžeš kloudně makat na frontentu, když ti chybí např jQuery…
Jinak co se týče toho bootstrapu, tak bych ho přes composer netahal. Nevím jestli to něčemu vadí nebo nebo ne. Composer ti spravuje php závislosti a vygeneruje ti autoloading. Tak nějak intuitivně mi tam frontend framework nepatří…
- jiri.pudil
- Nette Blogger | 1032
Jinak ještě druhý dotaz ohledně gruntu. Máš na kompilaci udělané nějaké workflow? Nechce se mi po každé editaci less pouštět příkazovou řádku, určitě to půjde jednodušeji :)
V Gruntu i Gulpu lze nakonfigurovat watch, který spustíš jednou, on si potom sám hlídá soubory a při změně nad nimi vykoná vybrané tasky. A jestli vůbec nejsi kamarád s příkazovou řádkou, PhpStorm 8 má pro oba build systémy podpůrné nástroje.
Editoval jiri.pudil (1. 10. 2014 8:32)
- marau
- Člen | 50
Ok, budu si asi ošetřovat závislosti přes bower, ale na ostrém si následně budu hlídat změny a uploadovat jen cdn odkazy. Přeci jen, na mobilních zařízeních je každý ušetřený kb k nezaplacení. Jen je škoda, že nic takového neumí bower pohlídat sám a na ostrém překládat cesty ke knihovnám na jejich registrované cdn verze. Nebo umí? :)
- newPOPE
- Člen | 648
Zavislosti: bower
Loading: webLoader (pripadne ak sa ti chce hrat tak grunt/gulp buildy vid: https://github.com/…ette-sandbox no pride mi to zbytocne)
Kompilacia: grunt/gulp task + browserSync (funguje vsade :) http://www.browsersync.io/)
Co sa tyka skryvania LESS suborov tak tie si daj kam chces mimo public-u a
grunt/gulp ti to skompiluje do style.css do public
Editoval newPOPE (1. 10. 2014 10:29)
- Oli
- Člen | 1215
Mám pocit, že @marau to myslel tak, že prohlížeč si to (pokud natvrdo nerefreshjueš) cachuje (js, img, css). A pokud použiješ cdn, tak je možné, že už ten soubor v cache máš. Tohle ale podle mě nefunguje s webloaderem, kterej to zkompletuje na serveru. Takže s cdn musíš tahat několik souborů pro js, css, … Takže pokud to není načtené v cache, tak to trvá výrazně déle, než jeden soubor.
Proto já bych cdn neřešil, uložil si to všechno k sobě a webloader aby mě vygeneroval minifikovaný css a js soubory. Ty si potom při první návštěvě prohlížeč nacachuje a příště už je nepotřebuje.
Hlavní výhoda je, že za všech okolností prohlížeč stahuje 1 css a 1 js soubor. S cdn možná i 10+ souborů, pokud neměl nic nacachováno…
- marau
- Člen | 50
Pokud používá stejný cdn odkaz více webů, je možné, že návštěvník příjde ke mně na web a má soubor uložen již z návštěvy jiného webu. V takovém případě se mu soubor znovu nestahuje (pokud jej má nakešovaný). Například z takového jQuery je šance celkem vysoká. V ideálním případě tedy příjde a stáhne si pouzé mé css a js soubory a nemusí již natahovat frameworky.
Dá se to vyřešit production < development sekcí ve webloaderu – na produkčním tahej z cdn, na lokálním si to natahuj z lokálně stáhnutých balíčků přes bower.
- Quinix
- Člen | 108
I u jquery je ta šance hodně nízká kvůli velkému množství verzí. Navíc na mobilních přípojeních je zásadnější počet requestů než ušetřených 100 kB za jQuery.
Osobně používám grunt podle https://pla.nette.org/…unt-a-usemin + na instalaci knihoven bower.
Editoval Quinix (1. 10. 2014 17:07)
- Quinix
- Člen | 108
Jo, cílem toho co je v tom článku je sloučení a minifikace CSS/JS podle toho build bloku. Samozřejmě si k tomu můžeš přidat další tasky na kopilaci LESS, CoffeeScriptu, watch atd. (sám to tak mám).
Osobně vidim velkou výhodu v tom, že při vývoji můžeš pracovat s rozdělenými a neminifikovanými JS/CSS soubory a po deploy mít ve stránce jen jeden. Což myslim že třeba u webloaderu nejde.
- AntiCZ
- Člen | 13
Ja less kompiluju pres PHP. http://lessphp.gpeasy.com/. Pousti se jen tehdy, pokud je rozdil mdate u vysledneho css a less, takze vicemene to muze byt zapnute porad.
Mam to takhle z toho duvodu, ze clovek nikdy nevi kdo s tim webem bude za par let pracovat a pokud k tomu prijde nejaky coder, ktery nema netbeans, nezna tohle a tamhle to. Jen edituje soubor a hotovo.
Editoval AntiCZ (2. 10. 2014 11:30)
- ondraondra81
- Člen | 82
Podle mě je WebLoader super komponenta, která toto řeší, a tak nějak mě uniká proč použít grunt a dělat to ručně. (vytvářet tasky)
já mám less normálně ve složce www/css/less ale můžeš si je dát kam jen budeš chtít. pro vygenerování ccs používám plugin v phpstormu (LESS CSS Compiler), který se automaticky spustí po uložení a vygeneruje do www/css *.css soubory, které jen přidám do config.neon pro webloader.
V podstatě jsem také přemýšlel jestli ty css/less soubory nedat do někam do APP, ale přijde mě to zbytečné :)
- marau
- Člen | 50
Já už mám asi finální rozhodnutí
Adresářová struktura ve www adresáři:
- bower.json
- bower_components/ (neverzovaný adresář, do kterého se budou stahovat pouze komponenty, nebude se nahrávat na git ale jen zálohovat)
- less/ (mé vlastní less soubory)
- css/ (cíl pro zkompilované less soubory)
- js/ (cíl pro mé vlastní js soubory)
- media/images/ (png, jpg soubory)
- wt/ (cíl pro zkompilované soubory webloaderu)
- + index.php, robots.txt atd …
Nástroje:
- bower pro správu závislostí (jquery, bootstrap, jqueryui atd …)
- grunt pro watch a realtime kompilaci less v adresáři www/less (bootstrap a další csska se budou načítat přes @include)
- webloader (správa zkompilovaných css a js, jejich spojení a minifikace přes filtry)
Celkem dlouho jsem se rozhodoval, zda využívat webloader a nebo použíat grunt i na minifikaci, nakonec jsem však kvůli svému pohodlí zůstal u webloaderu. Tak snad to v budoucnu shledám jako správnou volbu. A pokud ne, není to tak složité upravit.