README

将 Assetic 资产管理框架集成到您的 TYPO3 CMS 安装中。

安装

首先，您需要安装所需的 Cundd Composer 扩展，并让 Composer 安装所有依赖项
包含静态的 TypoScript 文件
配置您希望加载的资产

使用方法

基本

plugin.CunddAssetic {
    stylesheets {
        custom_identifier_for_the_asset = fileadmin/stylesheets/style.css
    }
}

多个资产

plugin.CunddAssetic {
    stylesheets {
        identifier_for_asset_1 = fileadmin/stylesheets/reset.css
        identifier_for_asset_2 = fileadmin/stylesheets/style.css
    }
}

使用 SASS

如果您的 Web 服务器和 Web 用户已配置为能够使用 sass 命令行工具，您可以在 TYPO3 安装目录中，使用以下方法

plugin.CunddAssetic {
    stylesheets {
        custom_identifier_for_the_asset = fileadmin/bootstrap/lib/bootstrap.scss
    }
}

在 PHP 中使用 SASS

如果您必须使用不带原始 Ruby 实现的 SASS，您可以使用由 leafo 编写的 PHP 版本的 SASS。您需要确保库已安装（使用 Composer），并且 Scssphp 过滤器用于 *.scss 文件

plugin.CunddAssetic {
    stylesheets {
        custom_identifier_for_the_asset = fileadmin/bootstrap/lib/bootstrap.scss
    }

    filter_for_type {
        scss = Assetic\Filter\ScssphpFilter
    }
}

使用其他 CSS 预处理器

类似地，您可以使用其他 CSS 预处理器。Assetic 的 GitHub 页面提供了所有提供与安装的 Assetic 版本一起提供的过滤器（不完整）列表。

开发模式

为了确保每次刷新前端页面时都会编译资产，您可以启用开发模式

plugin.CunddAssetic {
	development = 1
}

默认情况下，Cundd Assetic 配置为在未登录的后台用户的情况下不编译文件。因此，客户端不会看到您可能忽略的更改。要允许在没有登录的后台用户的情况下编译文件，您可以在 TypoScript 或常量编辑器中更改 allow_compile_without_login 配置

plugin.CunddAssetic {
    allow_compile_without_login = 1
}

高级

配置过滤器

一些过滤器允许更多定制。例如，ScssphpFilter 提供了 addImportPath 方法，这使得您可以将另一个路径添加到查找导入的 scss 文件的位置。Cundd Assetic 提供了一个通过 TypoScript 调用此类函数的接口。

plugin.CunddAssetic.stylesheets.custom_identifier_for_the_asset {
    ### Add functions that will be called on the filter
    functions {
        addImportPath = fileadmin/local/sass/
    }
}

如果您想多次调用一个方法，只需给函数名添加一个数字前缀即可

plugin.CunddAssetic.stylesheets.custom_identifier_for_the_asset {
    functions {
        # Add a numeric prefix to allow the function to called multiple times
        0-addImportPath = fileadmin/local/sass/
        1-addImportPath = fileadmin/core/sass/
    }
}

配置过滤器二进制路径

在某些情况下，您可能需要指定 CSS 预处理器的路径以匹配您的操作系统配置。这可以通过 TypoScript 中的 filter_binaries 指令来完成

plugin.CunddAssetic {
    filter_binaries {
    	# Change the path to the filter binaries. I.e. if node.js is installed
    	# into /usr/local/bin/
		assetic_filter_lessfilter = /usr/local/bin/node
		
		# The binary for filter class \Assetic\Filter\Sass\ScssFilter
		assetic_filter_sass_scssfilter = /usr/local/bin/sass
    }
}

命令行

Assetic 提供了三个不同的 CLI 命令。

assetic:run

编译资产并退出。

vendor/bin/typo3 assetic:run

assetic:watch

监视 fileadmin/ 中的文件更改，并在需要时重新编译资产。

vendor/bin/typo3 assetic:watch

assetic:livereload

启动一个兼容 LiveReload 的服务器，监视 fileadmin/ 中的文件更改，并在需要时重新编译资产。TypoScript 常量 module.tx_assetic.settings.livereload.add_javascript 应设置为 1。

vendor/bin/typo3 assetic:livereload

其他工具

独立自动刷新工具

Cundd Assetic 提供了一个 JavaScript，它可以监视页面上的 CSS 和 JavaScript 资产以进行更改，并自动重新加载它们。有关更多信息和使用方法，请访问 /Resources/Public/JavaScript。

cundd / assetic

维护者

详细信息