README

这个库允许您使用配置文件（如Casset），使用户能够管理 FuelPHP 中的 JavaScript 和 CSS 包含，而不需要所有的处理功能。由于我切换到使用预处理器来处理所有这些，所以我需要一个更简单的库来管理资产。

安装

使用 Composer 安装，如果 qAsset 没有上传到 Packagist，请使用以下示例中的 repositories 指令添加此仓库。

    "repositories" : [
        {
            "url":"https://github.com/iturgeon/qAsset.git",
            "type":"git"
        }
    ],
    "require": {
        "php": ">=5.4",
        "iturgeon/qasset": "1.0.0"
    },

配置

可以在配置文件中配置组和默认组。存在一个针对 js（fuel/app/config/js.php）的配置文件，还有一个针对 css（css.php）的配置文件。

以下是一个 css.php 配置示例

<?php
return [
	// Reduces groups with the same name down to one
	// 'remove_group_duplicates' => true, // default = true

	// define paths shortcuts like Casset does
	'paths' => [
		'gfonts' => '//fonts.googleapis.com/',
		'theme'  => '/themes/'.Config::get('theme.active', 'default').'/assets/css/',
		'assets' => '/assets/css'
	],

	// groups to always load, and where to place them
	'always_load_groups' => [
		// default placement
		'default' => [
			'main', // groups
			'fonts',
		],
		// custom footer placement (more useful for js then it would be css!)
		'footer' => [
			'angular' // group
		]
	],

	'groups' => [
		// group is in the always_load_groups above, inserted into the default placement
		'fonts' => [
			// same as: '//fonts.googleapis.com/css?family=AWESOMEFONT:400,700,900'
			'gfonts::css?family=AWESOMEFONT:400,700,900' 
		],
		// group is in the always_load_groups above, inserted into the default placement
		'main' => [
			'theme::site.css',
			'theme::normalize.min.css',
		],
		'homepage' => [
			'theme::homepage.css',
		],
	],

	// Change the precalulated hash config file name, defaults to 'asset_hash.json'
	// Supports any fuelphp config format
	'hash_file' => 'asset_hash.json'
];

使用预计算的哈希进行缓存破坏

qAsset 允许您加载预计算的文件哈希以附加到 URL 以进行缓存破坏。许多预处理器允许您在构建这些文件时预先计算文件哈希（如 hash-assets-webpack-plugin 或 gulp-hashsum-json），这个小小的功能将支持这些哈希。

默认情况下，CSS 和 JavaScript 从 asset_hash.json 加载，但如果这更适合您的需求，它们可以配置为加载单独的文件。

该配置文件需要返回一个关联数组，其中键是相对于公共目录的文件，值是哈希

示例

{
	"/assets/file.js": "hash_value",
	"/assets/file2.js": "other_value"
}

当包含在页面中时，这两个文件将附加哈希以进行缓存破坏。

<script src="/assets/file.js?hash_value"></script>
<script src="/assets/file2.js?other_value"></script>

用法

您可以在控制器方法中准备 CSS 和 JS 内联，我发现这对于快速设置很有用。稍后我会回来，将可重用项移动到配置文件。

主页控制器

	public function action_index()
	{
		// insert the javascript group 'homepage' (defined in js.php config) into the footer placement
		Js::push_group('homepage', 'footer');

		// adds a script directly w/o using groups, send an array of scripts if you want 
		Js::push('theme::homepage.min.js');

		// adds inline javascript to the footer
		Js::push_inline('var CONST = true;', 'footer');

		// Css works the same way as Js
		Css::push_group(['homepage', 'holiday']); // you can send arrays!
		Css::push(['theme::one.css', 'theme::two.css']); // more arrays here
		Css::push_inline('div.total-mistake{ display:none; }'); // for those last minute monkey patches

		$theme = Theme::instance();
		$theme->set_template('layouts/homepage')
			->set('title', 'Welcome to the Magic Show');

		return Response::forge($theme);
	}

主页布局

<!DOCTYPE html>
<html>
<head>
<title><?= $title ?> | Mystical Website</title>
<!-- Renders the 'default' placement for Css and Js with no arguments -->
<?= Css::render() ?>
<?= Js::render() ?>
</head>
<body>
	<!-- YOUR PAGE HERE -->

	<!-- Render the Javascript 'footer' placement -->
	<?= Js::render('footer') ?>
</body>
</html>

iturgeon / qasset

维护者

详情

README

安装

配置

使用预计算的哈希进行缓存破坏

用法

主页控制器

主页布局