geniv/nette-front-loader

Front loader extension for Nette Framework

Front loader

for CSS & JS loader, _(*1)

Installation

$ composer require geniv/nette-front-loader

or, _(*2)

"geniv/nette-front-loader": "^1.2"

require:, _(*3)

"php": ">=7.0",
"nette/application": ">=2.4",
"nette/utils": ">=2.4",
"latte/latte": ">=2.4",
"tracy/tracy": ">=2.4"

Include in application

neon configure:, _(*4)

# front loader
frontLoader:
#   debugger: false
#   productionMode: true
#   developmentMode: false
    dir: %wwwDir%
    css:    # files without extension
        - css/global
        - static:css/global1
        - "https://fonts.googleapis.com"
        - "//fonts.googleapis.com"
        front:  # source
            - css/styles1
            - static:css/styles2
    js:     # files without extension
        - js/global
        - static:js/global1
        - "https://cdnjs.com"
        - "//cdnjs.com"
        front:  # source
            - js/script1
            - static:js/script2
    tagDev: '.'
    tagProd: '.min.'
    envDev: 'development'
    envProd: 'production'
    modifyTimeVar: 'mt'

if productionMode is not defined or set null then loader will be automatic detect production mode, _(*5)

developmet or stage environment is development (tagDev) settings (full css)., _(*6)

production environment is production (tagProd) settings (minimal css)., _(*7)

compile block work only developmentMode, other accept: productionMode., _(*8)

Setting for load css/js file without change environment name begin keyword: static: like http., _(*9)

each mode states:

• development:, _(*10)

  • productionMode: false
  • developmentMode: true

• stage:, _(*11)

  • productionMode: false
  • developmentMode: false

• production:, _(*12)

  • productionMode: true
  • developmentMode: false

neon configure extension:, _(*13)

extensions:
    frontLoader: FrontLoader\Bridges\Nette\Extension

usage:, _(*14)

use FrontLoader\IFrontLoader;

protected function createComponentFrontLoader(IFrontLoader $frontLoader): IFrontLoader
{
    //$frontLoader->setFormat('css', '        <link rel="stylesheet" href="%s">');
    //$frontLoader->setFormat('js', '    ');
    return $frontLoader;
}

@layout.latte, _(*15)

for CSS

{block head}
    {control frontLoader:css}
{/block}

or defined source, _(*16)

{block head}
    {control frontLoader:css 'front'}
{/block}

for JS

{block scripts}
    {control frontLoader:js}
{/block}

or defined source, _(*17)

{block scripts}
    {control frontLoader:js 'front'}
{/block}

other presenter *.latte:, _(*18)

{block title}...{/block}
{block description}...{/block}
{block slug}...{/block}

{block content}
...
{/block}

{block scripts}
    {include parent}
    
{/block}

{block head}
    {include parent}
    <link rel="stylesheet" href="source.css">
{/block}