README

用于 CSS & JS 加载器

安装

$ composer require geniv/nette-front-loader

或

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

require

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

包含在应用程序中

neon 配置

# 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'

如果未定义或设置为 null，则加载器将自动检测生产模式

developmet 或 stage 环境是开发（tagDev）设置（完整 CSS）。

production 环境是生产（tagProd）设置（最小化 CSS）。

compile 块仅在 developmentMode 下工作，其他接受：productionMode。

设置用于加载 CSS/JS 文件而不更改环境名称的起始关键字：static:，例如 http。

每种模式的状态

• 开发:

  • productionMode: false
  • developmentMode: true

• 预发布:

  • productionMode: false
  • developmentMode: false

• 生产:

  • productionMode: true
  • developmentMode: false

neon 扩展配置

extensions:
    frontLoader: FrontLoader\Bridges\Nette\Extension

用法

use FrontLoader\IFrontLoader;

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

@layout.latte

用于 CSS

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

或定义的源

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

用于 JS

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

或定义的源

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

其他呈现器 *.latte

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

{block content}
...
{/block}

{block scripts}
    {include parent}
    <script src="source.js"></script>
{/block}

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