README

为您的Nette项目提供资产加载器

依赖项

快速入门

1. 使用composer安装 Asset Loader

   composer require grape-fluid/asset-loader
   

2. 注册 扩展（在neon中）

   extensions:
   	assets: Grapesc\GrapeFluid\AssetLoaderExtension
   

3. 设置您的 公共目录（通常是www）（在neon中）

   assets:
   	config:
   		wwwDir: %appDir%/../www
   

4. 设置您的第一个包（见下面的所有选项/功能）

   assets:
   	yourPackage:
   		js:
   			# will create file in wwwDir/assets/yourPackage/js/main.js
   			- %appDir%/modules/WebsiteModule/assets/js/main.js
   		css:
   			# will create file in wwwDir/assets/yourPackage/css/styles.css
   			- %appDir%/modules/StyleModule/assets/css/style.css
   			# you can also use external / remote assets
   			- 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css'
   		copy:
   			# will copy all images from folder into wwwDir/assets/yourPackage/copy/
   			- %appDir%/modules/StyleModule/assets/images/*
   

5. 在您的 BasePresenter 中注入 AssetsControl 并创建组件

   /** @var \Grapesc\GrapeFluid\AssetsControl\AssetsControl @inject */
   public $assets;
   
   
   protected function createComponentAssets()
   {
   	return $this->assets;
   }
   

6. 在 模板 中渲染您的资产

   {control assets:css}
   {control assets:js}
   

多个文件

如果您有太多文件（例如脚本）想要包含在模板中，或者只想复制整个目录（例如图片），您可以使用星号 * 字符。

assets:
	yourPackage:
		js:
			- %appDir%/modules/WebsiteModule/assets/js/scripts/*

自定义目标

如果您需要，出于任何原因，将文件复制到公共目录中并使用自定义名称或自定义目录，只需指定资产为数组。您可以使用 & 字符，它将被替换为公共资产目录文件夹。

assets:
	yourPackage:
		js:
			# [ source, destination ]
			- [ %appDir%/modules/WebsiteModule/assets/js/main.js, &/my/folder/test.js ]

您也可以对整个 目录 做同样的事情

assets:
	yourPackage:
		js:
			# [ source, destination ]
			- [ %appDir%/modules/StyleModule/assets/images/*, &/images/ ]

选项

当然，快速入门不会做任何特殊的事情，只是复制文件并在模板文件中使用它们。但有了这些选项，事情会变得更有趣。

限制

您可以通过Nette-like链接来限制 资产。默认情况下，所有定义的资产在所有地方都是启用的。您可以 组合多个限制。通过使用限制，资产加载器将仅加载符合您限制的资产。您可以轻松地为后端/前端创建资产，也可以为子前端模块等创建资产。

如何限制 模块 的资产？

assets:
	yourPackage:
		limit:
			- ":Module:.*"

如何限制多个 呈现器 的资产？

assets:
	yourPackage:
		limit:
			- ":Module:Presenter:.*"
			- ":Module:AnotherPresenter:.*"

通过访问权限（$user->isAllowed()）限制

assets:
	yourPackage:
		# Will call $user->isAllowed('homepage')
		- ['link' = ':Module:Presenter.*', 'auth' = 'homepage']

通过自定义选项限制

创建并定义自定义服务，该服务实现以下接口： \Grapesc\GrapeFluid\Options\IAssetOptions，如下所示。 我们将自动将这些注册为服务，因此您不需要这样做。 通过构造函数注入 这些服务也有效。现在您可以根据自己的意愿处理限制。例如，从您的后台办公室启用/禁用资产。

assets:
	config:
		options:
			# Must implement \Grapesc\GrapeFluid\Options\IAssetOptions
			- \Your\Class\That\Handles\SomeOptions
			- \Your\Class\That\Handles\AnotherOptions
	yourPackage:
		# Will call $class->getOption('inline.enabled') on every service
		- ['link' = ':Module:Presenter.*', 'option' = 'inline.enabled']

使用否定限制

在限制前使用 !

assets:
	yourPackage:
		limit:
			- "!:Module:Presenter:.*"

排序

有时，尤其是在使用模块时，对您的包进行排序/排序会很方便。

开始/结束

assets:
	yourPackage:
		order: [start|end]

在...之前/之后

assets:
	yourPackage:
		order:
			[before|after]: anotherPackageName

或

assets:
	yourPackage:
		order:
			type: [before|after]
			position: anotherPackageName

禁用

assets:
	yourPackage:
		[disable|disabled]: true

调试

默认情况下，Asset Loader以生产模式运行，您可以使用以下方法覆盖此操作

assets:
	config:
		debug: true

当调试模式为1时，Asset Loader监视文件变化并自动部署它们。如果您向包中添加新文件，它也会工作。

其他

自定义资产文件夹

assets:
	config:
		assetsDir: customDirectoryName

目录权限

assets:
	config:
		dirPerm: 0511