[addon webloader] Extras/webloader

Když má joinFiles hodnotu FALSE, zároveň je zdrojový a cílový adresář stejný a zároveň není žádný filtr, bylo by IMHO vhodné vracet beze změny ten samý soubor.

Podpořte prosím zavedení navrhované změny na GitHubu

Osobně toto používám pro Development prostředí.

Dále jsem narazil na problém, kdy se v šabloně zavolá komponenta s parametrem na externí soubor {control js ‚http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js‘}.

Podpořte prosím zavedení navrhované změny na GitHubu

Editoval 2bfree (9. 4. 2012 12:35)

Voláš addFile nad CssLoaderem, který tu metodu nemá. Třída FileCollection ji má.

Možná řešení:

1. Vkládat vždy všechno CSS. Výhodou je, že pokud prohlížeč jednou stáhne CSS, má už ho v keši a nic dalšího nestahuje.
2. Renderovat takto: {control css} {control css 'css/a/site.css'} – vyrenderuje se komponenta s defaultním css a podruhé už jen s tím jedním souborem.
3. Nejhorším řešením by bylo to, o co se asi snažíš. Pokud na každé jednotlivé podstránce přidáš do kolekce CSS jeden malý soubor, tak kvůli spojování souborů se vždy bude stahovat ta defaultní část CSS znova, přestože by to při použití způsobu 1 nebo 2 mohlo jít z cache.

Zdravím,
je možné za použití webloaderu následující (přidání řetězce CSS)?

<?php
protected function createComponentCss() {
	$files = new \WebLoader\FileCollection(WWW_DIR . '/css');
	$compiler = \WebLoader\Compiler::createCssCompiler($files, WWW_DIR . '/cache');

	$compiler->addString($this['anotherComponent']->getCSS());//ADD STRING

	$filter = new \WebLoader\Filter\VariablesFilter(array(
		"imagesPath" => $this->template->basePath.'/images'));
	$compiler->addFilter($filter);
	$compiler->addFilter(function ($code) {
		return \CssMin::minify($code,array("remove-last-semicolon"));
	});
	return new \WebLoader\Nette\CssLoader($compiler,$this->template->basePath . '/cache');
}
?>

Editoval cryou (29. 5. 2012 19:06)

Zdravim, mam takovy mirny problem s JSloaderem (u css mi to slape perfektne bez problemu).
V pripade, ze vsechny soubory primo v sablone, vse slape tak jak ma, viz:

{control js 'netteForms.js', '../fancybox/jquery.fancybox.pack.js', 'jquery-ui-1.8.19.custom.min.js', 'mousewheel.js', 'ageblock.min.js', 'jlayers.min.js', 'jquery.cycle.js', 'jquery.nette.js', 'settings.js'}

Pokud ale necham nacitat soubory pomoci Nette\Utils\Finder vyhodi mi hned pri prvni prilezitosti firebug chybu jQuery is not defined a tim padem schodi cely JS.

Kod tovarnicky:

public function createComponentJs()
	{
		$files = new \WebLoader\FileCollection(WWW_DIR . '/js');
		$files->addRemoteFile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
		$files->addFiles(\Nette\Utils\Finder::findFiles('*.js')->from( WWW_DIR . '/js' ));
		$files->addFile(WWW_DIR . '/fancybox/jquery.fancybox.pack.js');
		$compiler = \WebLoader\Compiler::createJsCompiler($files, WWW_DIR . '/webtemp');
		// $compiler->addFilter(function ($code) { return JSMin::minify($code); });
		return new \WebLoader\Nette\JavaScriptLoader($compiler, $this->template->basePath . '/webtemp');
	}

Zkousel jsem to jak s externim CDN na google jquery, tak s vlastni knihovnou umistenou v /js/, take mam zakomentovany js minifier jestli to nahodou nezpusobuje on… vyzkousel jsem vechno mozne, a nedari se mi prijit proc to zlobi.

Jquery je nactene, viz vygenerovane html:

<link rel="stylesheet" type="text/css" href="/helsinki-new/webtemp/cssloader-d9aef7184c9d.css?1340742089" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/helsinki-new/webtemp/jsloader-0b57bd78e505.js?1340743227"></script>

Jde mi jen o usnadneni prace, abych u kazdeho projektu nemusel pri pridani jakehokoliv js pluginu editovat kod {controlu}, ale aby se to samo nacetlo pres finder, u css to funguje bezvadne.

Kouknu se na to a vyzkousim, nejde mi ale do hlavy proc kdyz predam presne nazvy to funguje a proc pri pouziti finderu ne.

Edit: nevim proc, nevim jak, zkusil jsem znova promazat cely webtemp i temp (to jsem delal predtim uz 20x), odpoznamkoval si kod abych to vyzkousel znova a z niceho nic to jede, to mi fakt nejde do hlavy :)

Editoval Lexi (27. 6. 2012 16:17)

Zkus $compiler->addFileFilter($filter);. AddFilter se aplikuje na celý spojený výstup, takže WebLoader pak nezná cesty k jednotlivým souborům.

Zkoušel jsem přidat filter jsShrink pomocí tohoto kódu a při spuštění mi to vždycky ihned shodí apache (program přestal odpovídat…). Netuší někdo prosím vás, čím by to mohlo být?

Siam napsal(a):

Zkoušel jsem přidat filter jsShrink pomocí tohoto kódu a při spuštění mi to vždycky ihned shodí apache (program přestal odpovídat…). Netuší někdo prosím vás, čím by to mohlo být?

Zkoušel jsem ho nasadit před pár týdny a to se nakonec povedlo, ale úspěšný moc nebyl. Funguje jen na opravdu jednoduché javascripty. Třeba jQuery vůbec neminimalizuje. Na většině z toho, co používám selže.

Aktuálně jsem tedy přešel na JSMin a cssmin a všechno už funguje (scripty se minimalizací nepoškodí), nevím, jestli by třeba jiné nezmenšovali lépe, průzkum jsem si nedělal, ale tak nějak to funguje a oproti původnímu kódu je nový výrazně menší.

Tak se na to dívám… kód mám stejný, ale jeden rozdíl by tu byl. Mám asi hodně starý cssmin (200 řádků kódu), to co je tam dneska aktuální verze má 5000 řádků kódu (!). Návod asi taky počítá se starší verzí: https://dl-web.dropbox.com/…c/cssmin.php?… protože při použití verze 2, nebo 3 už to nefunguje.

Dobrý den. Jde prosím nějak nastavit, aby to negenerovalo ty lomítka na konci tagů?

nette:
    xhtml: false

Zdravím,

mohu se zeptat jak to děláte s obrázky? Používám WebLoader a díky tomu mám knihovny v adresáři libs. WebLoader je schroustá a css a js připraví do adresáře www/webtemp. To funguje skvěle.

Avšak co když má knihovna obrázky? Obrázky jsou většinou počítány relativně od místa, kde je uložen css/js soubor čili stačí obrázky nahrát do adresáře www/webtemp.

To se mi však nezdá příliš elegantní a předpokládám, že mi něco uniká. Čili jak se to má dělat správně?

Příklad takové knihovny je třeba Bootstrap from Twitter.

@178 martinit: Tohle používám. To nastaví root složku pro css. Ale jak tam ty obrázky dostat?

Samozřejmě je lze zkopírovat ručně. Ale to se pak vytrácí část kouzla webloaderu :). Já bych rád nastavil, aby to fungovalo stejně jako s css a js. Tedy webloader by zkontroloval, zda soubory existují ve webtemp, pokud ne, tak by je zkopíroval.

Čili by stačilo nahrát novou verzi knihovny do libs a automaticky by se aktualizovali i obrázky.

Tak já asi dělám něco blbě. Mám to stejně a nefunguje mi to.

Používám nastavení v config.neon:

common:
	services:
		wlCssFilter: WebLoader\Filter\CssUrlsFilter( %wwwDir% )

	webloader:
		css:
			default:
				remoteFiles:
					- http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
				files:
					- %wwwDir%/../libs/Bootstrap/css/bootstrap.min.css
					- %wwwDir%/../libs/Bootstrap/css/bootstrap-responsive.min.css
					- %wwwDir%/../libs/TwitterControl/client-side/TwitterControl.css
					- %wwwDir%/texyla/css/style.css
					- %wwwDir%/texyla/themes/default/theme.css
				filters:
					- @wlCssFilter

což je stejně jako to máš ty, akorát v neonu, ne?

V BasePresenteru.php mám:

  /**
  * Css loader factory
  * @return CssLoader
*/
  public function createComponentCss()
  {
    return new \WebLoader\Nette\CssLoader(
      $this->context->webloader->cssDefaultCompiler, // service generated by extension
      $this->template->basePath . '/webtemp'
    );
  }

A v css je např:
url("http://localhost/projekt/www/webtemp/img/glyphicons-halflings.png")

Editoval kedrigern (30. 11. 2012 19:55)

Koukám, že CssUrlsFilter je označen jako deprecated. Co se má použít místo něj? Zajímá mne to hlavně z hlediska stylů třetích stran – Colorbox, jQueryUI, etc.

Nojo, ale co když mám twitter bootstrap v libs/ (instaluju ho přes composer)? Pak obrázky stěhovat musím, protože jsou mimo document_root.

Na to jsem se ptal :).

Takže když mám JS a CSS knihovny v libs/, tak řešením je mít skript, který z nich vyextrahuje zdroje do www/webtemp/, je to tak?

Editoval kedrigern (10. 12. 2012 12:13)

Lexi: Zkus odstranit tu minifikaci, jestli to není tím. Včera jsem měl s Bootstrapem stejný problém. Používám ale Less soubory Bootstrapu. Nakonec jsem zjistil, že problém dělal soubor progress-bars.less. Můžeš zkusit vyhledat v CSS sekci s progress bary a zkusit ji odstranit. Já je nepoužívám, takže jsem to tak vyřešil.

Default je název CSS nebo JS. Můžeš si třeba definovat jedno CSS pro frontend a druhé pro admin.

Nejsem si jistý, asi se mi to taky stalo.

Teď mi to funguje takhle :-) Možná inspirace… Protože teď už se mi to neděje.

{var $css = array()}

{? $css[] = '../addons/bootstrap/css/bootstrap.css'}
{? $css[] = '../addons/highslide/css/highslide.css'}

{if $presenter->isAdmin} {* big script and style loading only for admins *}
	{? $css[] = '../addons/plupload/css/jquery.plupload.queue.css'}
	...
{/if}

{control css $css}

Ve výsledku se pak návštěvníkům načítá jedna verze skriptu a adminům druhá, větší.

Editoval Michalek (19. 1. 2013 15:11)

@**Honza Marek**: Zkusil jsem to upravit dle tvého návrhu, ale je to stejné. Pokud použiju jednu komponentu, tak to ukončí spojení. Pokud jich použiji víc, tak je to OK. Takže v použití maker v makru problém nebude.

Spojení přerušeno – Spojení se serverem bylo v průběhu načítání stránky ukončeno.

Něco takového obvykle ukazuje prohlížeč, když detekuje HTTP hlavičku 500. V Chrome třeba pomáhá zapnout si inspektora (F12) a pak se ukáže laděnka (pokud je zaplý development mód).

Ve firefoxu FireBug

Michalek napsal(a):

Já k tomu jen tolik, že jakmile počet souborů překročí 16 (ať už v css nebo js), tzn. dostane se na 17+, apache se se mnou docela nevybíravě rozloučí.

To se mi v životě nestalo. A spojených souborů běžně mívám mnohem víc.