README

此包已被废弃，不再维护！

Nette 框架的静态 CSS 和 JS 文件加载扩展

安装

使用 Composer 安装 ipub/assets-loader 是最佳方式

{
	"require": {
		"ipub/assets-loader": "dev-master"
	}
}

或者

$ composer require ipub/assets-loader:@dev

之后，您需要在 config.neon 中注册扩展。

extensions:
	assetsLoader: IPub\AssetsLoader\DI\AssetsLoaderExtension

包包含一个特质，您需要在 Presenter 中使用它来实现 Assets Loader 工厂。此功能仅适用于 PHP 5.4+，对于旧版本，您可以简单地将特质内容复制并粘贴到您想要使用的类中。

<?php

class BasePresenter extends Nette\Application\UI\Presenter
{

	use IPub\AssetsLoader\TAssetsLoader;

}

配置

	# Static files loader
	assetsLoader:
		routes:
			# Here you can define your route for static files (*.css and *.js)
			assets	: "assets-files/<id>[-t<timestamp>][-<gzipped>].<type>"
			# And here you can define route for images or other files which can't be inserted directly into static file
			# eg. fonts in CSS files, or SVG images
			files	: "assets-files-images/<id>[-t<timestamp>]"
		css:
			gzip	: true # Enable or disable output gzip
			files	:
				# Here define all css static files which should be inserted into default asset
				- %fullPathToFile%/first.css
				- %fullPathToFile%/second.css
				- https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.css
			filters:
				# File filters (cssUrlsFilter, lessFilter)
				# You can also insert your custom filter as service 
				files	: ['cssUrlsFilter', @userCustomFilter]
				# Content filters (styleCompressor, cssImportFilter)
				# You can also insert your custom filter as service
				content	: ['styleCompressor', 'cssImportFilter']
		js:
			gzip	: true # Enable or disable output gzip
			files	:
				# Here define all js static files which should be inserted into default asset
				- %fullPathToFile%/first.js
				- %fullPathToFile%/second.js
				- https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js
			filters:
				# File filters (coffeScriptFilter)
				# You can also insert your custom filter as service 
				files	: ['coffeScriptFilter', @userCustomFilter]
				# Content filters (scriptCompressor)
				# You can also insert your custom filter as service
				content	: ['scriptCompressor']

此扩展还具有定义不同资产组的能力。因此，您可以分别定义前端和后端的资产，如下所示

	# Static files loader
	assetsLoader:
		assets:
			# Define asset name
			# String 'default/Default' is deprecated
			frontend:
				css:
					gzip	: true # Enable or disable output gzip
					files	:
						# Here define all css static files which should be inserted into default asset
						- %fullPathToFile%/first.css
						- %fullPathToFile%/second.css
						- https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.css
					filters:
						# File filters (cssUrlsFilter, lessFilter)
						# You can also insert your custom filter as service 
						files	: ['cssUrlsFilter', @userCustomFilter]
						# Content filters (styleCompressor, cssImportFilter)
						# You can also insert your custom filter as service
						content	: ['styleCompressor', 'cssImportFilter']
				js:
					gzip	: true # Enable or disable output gzip
					files	:
						# Here define all js static files which should be inserted into default asset
						- %fullPathToFile%/first.js
						- %fullPathToFile%/second.js
						- https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js
					filters:
						# File filters (coffeScriptFilter)
						# You can also insert your custom filter as service 
						files	: ['coffeScriptFilter', @userCustomFilter]
						# Content filters (scriptCompressor)
						# You can also insert your custom filter as service
						content	: ['scriptCompressor']

此外，此扩展还带来了另一个功能包。现在，您可以定义包，并将这些包插入到资产组中

	common:
		parameters:
			assetsLoader:
				packages:
					# jQuery
					jQuery:
						# jQuery core
						core:
							js:
								- %staticFilesDir%/js/jquery/core/jquery-2.1.1.js
								- %staticFilesDir%/js/jquery/core/jquery.add.js
						# jQuery scroll to
						scrollTo:
							js:
								- %staticFilesDir%/js/jquery/addons/jquery-scrollTo/jquery-scrollTo.js
					# Bootstrap theme
					boostrap3:
						core:
							css:
								- %staticFilesDir%/themes/bootstrap3/css/bootstrap.css
							js:
								- %staticFilesDir%/themes/bootstrap3/js/bootstrap.js
					# Bootstrap theme icons
					icons:
						css:
							- %staticFilesDir%/themes/bootstrap3/icons/font-awesome.css

现在我们已经定义了几个包，这些包可以在所有或某些资产组中使用

	# Static files loader
	assetsLoader:
		assets:
			# Frontend module or other name
			frontend:
				css:
					gzip		: true
					filters		:
						files	: ["cssUrlsFilter", "lessFilter"]
						content	: ["cssImportFilter"]
				js:
					gzip		: true
					filters		:
						files	: []
						content	: ["scriptCompressor"]
				packages:
					- %assetsLoader.packages.jQuery.core%
					- %assetsLoader.packages.jQuery.scrollTo%
					- %assetsLoader.packages.boostrap3.core%
					- %assetsLoader.packages.boostrap3.icons%

在 PHP 文件中使用

现在您必须在您的 Presenter 中创建组件。这些组件将提供静态文件 HTML 元素。因此，在 Presenter 中只需创建两个组件

class SomePresenter extends Nette\Application\UI\Presenter
{
	/**
	 * CSS static files component
	 *
	 * @return \IPub\AssetsLoader\Components\CssLoader
	 */
	protected function createComponentCss()
	{
		return $this->assetsLoader->createCssLoader('yourAssetName');
	}

	/**
	 * JS static files component
	 *
	 * @return \IPub\AssetsLoader\Components\JsLoader
	 */
	protected function createComponentJs()
	{
		return $this->assetsLoader->createJsLoader('yourAssetName');
	}
}

您只需设置 createXXLoader() 方法的一个参数，即您的资产名称。如果您不在组中使用资产，扩展将使用默认资产。如果您使用的是独立资产，您可以输入例如前端。

因此，PHP 部分就到这里。扩展现在已完全集成。

在 Latte 中使用

在您的布局 Latte 模板中，您可以放置组件调用

<html lang="en">
<head>
	{control css}
</head>
<body>
	{control js}
</body>
</html>

可用过滤器

文件过滤器

coffeScriptFilter

此过滤器仅适用于 JavaScript 文件。此过滤器将编译您的 CoffeeScripts 为可执行 JS。

lessFilter

此过滤器仅适用于 CSS 文件。此过滤器将编译您的 Less 文件为干净的 CSS 文件。

cssUrlsFilter

此过滤器仅适用于 CSS 文件。此过滤器将所有图像转换为 base64 编码的字符串，或者如果它不是有效的编码图像，则将其转换为使用 routes.files 路由定义创建的 URL。

内容过滤器

scriptCompressor

此过滤器仅适用于 JavaScript 文件。此过滤器最小化 JavaScript 字符串

styleCompressor

此过滤器仅适用于CSS文件。此过滤器压缩CSS字符串

cssImportFilter

此过滤器仅适用于CSS文件。此过滤器将导入语句移至文档顶部

使用IStaticFilesProvider

此扩展还实现了一个接口，以便您的扩展可以自动加载静态文件。要使用此功能，您必须在您的扩展中实现IStaticFilesProvider接口，并实现一个名为getStaticFiles的方法

class YourCoolExtension extends \IPub\AssetsLoader\DI\IStaticFilesProvider
{
	/**
	 * Return array of styles & scripts files
	 *
	 * @return array
	 */
	public function getStaticFiles()
	{
		return array(
			'frontend'	=> array(
				'css'	=> array(
					__DIR__ . '/../../../../client-side/frontend/css/style.css'
				),
				'js'	=> array(
					__DIR__ . '/../../../../client-side/frontend/js/nette.js',
				),
			),
			'panel'	=> array(
				'css'	=> array(
					__DIR__ . '/../../../../client-side/panel/css/style.css'
				),
				'js'	=> array(
					__DIR__ . '/../../../../client-side/panel/js/nette.js',
				),
			),
		);
	}
}

此静态文件提供者会复制正常设置中的行为，因此您可以在此处定义资产组或仅定义默认资产。

ipub / assets-loader

维护者

详细信息