dejvidecz/assets-loader

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

维护者

详细信息

github.com/dejvidecz/assets-loader

主页

源代码

问题

安装次数: 211

依赖者: 0

推荐者: 0

安全性: 0

星标: 0

关注者: 2

分支: 4

v1.0.7 2019-04-18 08:12 UTC

Requires

Requires (Dev)

GPL-2.0, GPL-3.0 9e91aee868b6ec2ecfc23b3f128b3f5287776145

assetsjavascriptcssJStoolsnette

This package is auto-updated.

Last update: 2024-09-18 20:38:48 UTC

README

Build Status Scrutinizer Code Coverage Scrutinizer Code Quality Latest Stable Version Composer Downloads License

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

安装

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

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

或者

$ composer require ipub/assets-loader:@dev

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

extensions:
	assetsLoader: IPub\AssetsLoader\DI\AssetsLoaderExtension

包包含一个特性，您需要在控制器中实现 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 文件中的使用

现在您需要在控制器中创建组件。这些组件将提供静态文件和 HTML 元素。因此，在控制器中只需创建两个组件

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() 方法中的资源名称。如果您不使用分组资源，则扩展将使用 默认 资源。如果您使用单独的资源，则可以输入例如 frontend。

这样，PHP 部分就完成了。扩展现在已完全集成。

在 Latte 中的使用

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

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

可用过滤器

文件过滤器

coffeScriptFilter

仅适用于 JavaScript 文件的过滤器。此过滤器将编译您的 CoffeeScript 为可执行的 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',
				),
			),
		);
	}
}

此静态文件提供程序的行为类似于正常设置，因此您可以在此处定义资源组或仅定义默认资源。