[addon webloader] Extras/webloader

@Honza Marek: jasnačka, tak bylo to v době, kdy se context používal nejvíc, ale chápu averzi k továrničkám.

Editoval jenicek (14. 11. 2013 14:18)

Ak cez composer natiahnem bootsrap/ckeditor, pomocou webloaderu sa mi obrazky z css nacitat nepodari ? Alebo je k tomu uz neake riesenie ?

@songoo: tipnu si že se ti špatně udělají cesty k obrázkům, resp zustanou ti takové jaké jsou v CSS ale soubor obsahující kolekci CSS je jinde a tak cesty nesedí. Musíš použít CSSUrlFilter akorát tedy nevím proč je daný jako deprecated

@martinit: aha tak to potom jo ;) No ja jsem si ty filtry pořešil podle předchozích projektů včetně přidání filtru pro fixnutí @import aby byl vždy nahoře souboru.

songoo napsal(a):

CSSUrlFilter obrazky z vendor/libs ale nevitiahne ?

Však je samozřejmé, že obrázky musí být někde, kde knim můžeš přes prohlížeč. Na tom se nic nezměnilo!

@dushoku: Přes cdn (http://fortawesome.github.io/…get-started/) v remoteFiles

Případně si přidej nějaký PathFilter.

Tak bez filtru to nemáš jak udělat. A ještě pozor linkování souborů musí být v CSS nahoře a to ty filtry neumí (nebo neuměly cca 1měs zpět)

mcmatak napsal(a):

Pozri https://componette.org/search/?…

@Lexi ja pouzivam tento LESS processor mne funguje bez problemov, odporucaju ho aj tu

@dukoshu: to je presne to na co jsem se ptal :) rad bych jej taky pouzival, namisto leafo/lessphp, nedari se mi ale rozbehnout file filter filtr do webloaderu (venoval jsem se tomu 20 minut a pak se na to vyprdl, protoze to pro me nebyla priorita)

@duskohu: diky moc, easy a funguje i s novym bootstrapem :) k tomu tvojemu problemu, napada me ze $file je null, protoze mas filtr uvedeny jako filter a ne fileFilter v configu

Mám dotaz, který by se dal možná použít i jako dobré vylepšení.
Pokud si vytvořím například několik balíčků přichází nutnost všechny definovat jako komponenty. Dalo by se využít více render metod komponenty pro vykreslení daného balíčku?

{control css:package}

Editoval Climber007 (11. 3. 2014 18:36)

1. Např. takhle:

webloader:
	css:
		admin:
			files:
				- {files: ["*.css", "*.less"], from: %wwwDir%/css/vendor/}
				- %wwwDir%/css/admin/bootstrap.min.css
				- %wwwDir%/css/admin/main.less
		front:
			files:
				- {files: ["*.css", "*.less"], from: %wwwDir%/css/vendor/}
				- %wwwDir%/css/front/bootstrap.min.css
				- %wwwDir%/css/front/main.less

a v presenteru si potom vytahnes ten konkretni balik, např:

	protected function createComponentCss()
	{
		return new CssLoader(
			$this->context->getService('webloader.cssAdminCompiler'), $this->template->basePath . '/webtemp'
		);
	}

2. Pokud vim tak defaultne ne, ale je jednoduchy si to tam dodělat. Třeba takhle jednoduchý css minifikator . Případně jsou i nějaký cssmin a jsshrink apod, ktery muzes vyuzit, jen je das do toho __invoke($code).
3. taky se mi tam tvori a byl jsem prekvapen, ale jednou za cas promaznu…

Díky za tip, já o bral podle addons.nette.org. Tohle je storpocentne lepší a hezčí

Ahoj, zacal jsem si hrat s webloaderem a vypada, ze funguje skvele.
Poradi mi prosim nekdo, jak do nasledujiciho neonu pridam filter CssMin::minify($code)?

webloader:
    css:
        default:
            files:
                - {files: ["*.css", "*.less"], from: %wwwDir%/assets/css}
            fileFilters:
                - @lessFilter
                - @wlCssFilter

A toto pak mam v basepresenteru:

	/** @return CssLoader */
	protected function createComponentCss()
	{
	    return $this->webLoader->createCssLoader('default');
	}

Diky moc!

@flexroad

Diky moc @Casper!

To vypada dobre. Snazi se to volat:

public static function minify($source, array $filters = null, array $plugins = null)

Vrati mi to ale chybu:

Argument 2 passed to CssMin::minify() must be of the type array, object given.

Jsem zacatecnik a moc netusim, jak to funguje. Nevim, jak mu ma predat to co po me chce:( Musim jeste nekam neco registrovat? Muzete prosim nekdo poradit?

Diky,

@flexroad

@Casper: Fantasticke, funguje to!!! Mnohokrat dekuji!

Kdyby nejaky nette lama jako ja potreboval, tak jsem dle doporuceni pouzil Tento minifier

a muj config.neon vypada nejak takto:

services:
    - CssMinifier

webloader:
    css:
        default:
            files:
                - {files: ["*.css", "*.less"], from: %wwwDir%/assets/css} # Nette\Utils\Finder support
            fileFilters:
                - @lessFilter
                - @wlCssFilter
            filters:
                - [@\CssMinifier, minify]

@flexroad

Chci se zeptat, dělá někdo na verzi pro Nette 2.2?

Včera jsem to nasazoval na nejnovější nette a přidával jsem si css/js minifikátory a ještě less a v pohodě všechno :-)

Pavel Macháň napsal(a):

Co používáš na JS jako minifikátor?

Radši se neptej… zkoušel jsem nějakej jShrink a kurvil mi kod tak že JS házel errory…
Takže jsem nahodil nějakej JSMin, kterej se už nevyvíjí a není doporučený ho používat. Funguje, já si nestěžuju. Nicméně udělal jsem si filtr ve WebLoaderu a není problém na jednom místě změnit jaká se bude používat knihovna.

Editoval CZechBoY (5. 9. 2014 23:08)

Tomáš Jacík napsal(a):

Zřejmě špatně chápu jak funguje require v composeru.
Nainstalovat se mi samozřejmě podařilo, ale nejde mi to do hlavy.
V GITu je tohle: „nette/nette“: "~2.0@rc"
Podle toho bych hádal že to Nette 2.2 nepustí.

@TomášJacík ~2.0 znamená, že to loadne verze 2.0 až 2.n … ~ udává, že se jede od daného posledního čísla až n verze… kdyby bylo ~2.2.0 tak se bude loadovat 2.2.0, 2.2.1, 2.2.2 atd…

~2.0@rc = 2.2 vyhovuje

Editoval Pavel Macháň (6. 9. 2014 16:00)

Zdravim,

potreboval bych poradit jak udelat override funkce v nejakem existujicim filtru. Napriklad bych potreboval prepsat public funkci __invoke v tride CssUrlsFilter. Pochopitelne to nechci prepisovat primo ve vendor.

Poradi nekdo korektni „nette way“, jak na to?

Diky,

@flexroad

Zkusil jsem si pridat tento doplnek, ovsem asi jsem ho moc nepochopil.

Do BasePresenteru jsem si pridal nasledujici kus kodu

protected function createComponentCss()
{
    $files = new WebLoader\FileCollection(WWW_DIR . 'front/css');
    $compiler = WebLoader\Compiler::createCssCompiler($files, WWW_DIR . '/temp');
    $compiler->addFilter(function ($code) {
        return cssmin::minify($code, "remove-last-semicolon");
    });
    $control = new WebLoader\Nette\CssLoader($compiler, '/webtemp');
    $control->setMedia('screen');
    return $control;
}

1. nenasel jsem nikde tridu cssmin
2. v latte mi to vrati sice link na css (v pripade vynechani cssmin), ale ten soubor neexistuje

Zda jsem to ale jinak pochopil, on si nacte vsechny CSS ve slozce www/front/css vytvori min verzi a tu ulozi do webtempu (predpokladam, ze to bere rekurzivne [vcetne podslozek]) a to same dela i s JS

Je pro to vsechno potreba neco jeste na serveru (Grunt)?

@iguana007
Super, jen mám problém s JS, když ho minifikuji, tak mi to následně do konzole háže
http://i.imgur.com/50Me0AA.png

protected function createComponentJavascripts() {
       $files = new WebLoader\FileCollection(WWW_DIR . $this->system->customer . '/js');
       $files->addFile('jquery-2.1.1.min.js');
       $files->addFile('jquery-ui.min.js');
       $files->addFile('bootstrap.min.js');
       $files->addFile('netteForms.js');
       $files->addFile('nette.ajax.js');
       $files->addFile('history.ajax.js');
       $files->addFile('../../lightbox/js/lightbox.min.js');
       $compiler = WebLoader\Compiler::createJsCompiler($files, WWW_DIR . 'js');
       $compiler->addFilter(function ($code) {
           return \JShrink\Minifier::minify($code);
       });
       $control = new WebLoader\Nette\JavaScriptLoader($compiler, '/js');
       return $control;
   }

Editoval Tirus91 (3. 10. 2014 0:09)

s tímto jsem se taky setkal – u větších knihoven (jQuery, bs3 apod) se při minifikaci vyskytují nejspíš potlačené chyby, proto mám v aplikaci více komponent z webloaderu – na vlastní skripty, které minifikuji, a na už minifikované velké knihovny mám prostě druhou komponentu, která je jen slučuje.

Mimochodem doporučuju použití Compiler Extension, které je součástí webloaderu. Příklad jednoho takového konfiguráku:

extensions:
  webloader: WebLoader\Nette\Extension

services:
  wlCssFilter: WebLoader\Filter\CssUrlsFilter(%wwwDir%)
  lessFilter: WebLoader\Filter\LessFilter
  cssMin: Joseki\Webloader\CssMinFilter
  jsMin: Joseki\Webloader\JsMinFilter

webloader:
  css:
    default:
      files:
        - octicons.css
        - design.css
        - tables.css
        - forms.css
      filters:
        - @wlCssFilter
        - @cssMin
    libs:
      files:
        - bootstrap.css
  js:
    default:
      files:
        - %libsDir%/composer/nette/forms/src/assets/netteForms.js
        - datepicker-init.js
        - form-formats.js
        - form-selections.js
        - form-navigation.js
        - main.js
      filters:
        - @jsMin
    libs:
      files:
        - jquery/jquery.js
        - jquery/jquery.ui.js
        - jquery/jquery.ui.lang.js
        - bootstrap/bootstrap.js

BasePresenter.php

/** @var \WebLoader\LoaderFactory @inject */
public $webLoader;


/** @return CssLoader */
protected function createComponentCss()
{
    return $this->webLoader->createCssLoader('default');
}



/** @return JavaScriptLoader */
protected function createComponentJs()
{
    return $this->webLoader->createJavaScriptLoader('default');
}



/** @return CssLoader */
protected function createComponentCssLibs()
{
    return $this->webLoader->createCssLoader('libs');
}



/** @return JavaScriptLoader */
protected function createComponentJsLibs()
{
    return $this->webLoader->createJavaScriptLoader('libs');
}