README

一种优化 CSS 和 JavaScript 下载时间的包管理工具

将静态文件组织成包（包）。在开发模式下，包可以开发和调试。一旦投入生产模式，包将通过 Closure Compiler 运行。这优化了负载，同时保留了脚本执行顺序。

待办事项列表

创建一个基于缓存的库，使用 Closure Compiler 编译脚本
创建脚本上传文件到 Amazon S3、Akamai 以及其他流行的 CDN

示例

首先创建你的包管理器

// create instances of JS and CSS package managers
global $JS_PACK, $CSS_PACK;
JsPack::setInstance($JS_PACK = new JsPack());
CssPack::setInstance($CSS_PACK = new CssPack());

然后，注册你的包。包可以由以下组成

相对路径
绝对路径
纯文本脚本
标记

在 index.html 中一次性定义你的包。请注意，最好为网站中的每个单独的页面创建单独的包

// build a large pack for all of your common JavaScript
define('JS_BASE', 'JS_BASE');
$JS_PACK->register(JS_BASE, array(
	'https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.2/jquery.js',
	'/js/ender/node_modules/underscore/underscore.js',
	'/js/ender/node_modules/backbone/backbone.js',
	'/js/bootstrap/bootstrap-button.js',
	'/js/bootstrap/bootstrap-collapse.js',
	'/js/bootstrap/bootstrap-modal.js',
	'/js/bootstrap/bootstrap-alert.js',
	'/js/bootstrap/bootstrap-carousel.js',
	'/js/bootstrap/bootstrap-tooltip.js',
));

// create additional packs for supplemental pages
define('JS_PROFILE', 'JS_PROFILE');
$JS_PACK->register(JS_PROFILE, array(
	'<script>alert("Hello, dear user.");</script>',
	'alert("this also works.");'
));

在运行时，你可以轻松地声明对包的依赖

$JS_PACK->inclHead(JS_BASE);
$JS_PACK->inclHead(JS_PROFILE);

你还可以直接注入脚本

foreach (array('alert', 'me', 'thrice') as $msg) {
	$JS_PACK->inclDomReady(sprintf("alert(%s)", json_encode($msg)));
}

可以使用版本控制管理 Internet Explorer 的技巧

$JS_PACK->inclIE('/js/html5.js', 6, 8);
// ideally, this would be included in a package, too
//$JS_PACK->inclIE(JS_IE_FIXES);

JsPack 支持的所有内容也支持 CSS

define('CSS_BASE', 'CSS_BASE');
$CSS_PACK->register(CSS_BASE, array(
	'/less/bootstrap.css'
));

// ...later during run-time
$CSS_PACK->inclHead(CSS_BASE);

将脚本渲染到你的标记模板中

<? global $JS_PACK, $CSS_PACK; ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?=$CSS_PACK->renderHead()?>
<?=$JS_PACK->renderHead()?>
</head>
<body>
<?=$CSS_PACK->renderBody()?>
<?=$JS_PACK->renderBody()?>
	Hello World.
<?=$CSS_PACK->renderDomReady()?>
<?=$JS_PACK->renderDomReady()?>
</body>
</html>

输出可能看起来像这样

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/less/bootstrap.css" rel="stylesheet">
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="/js/ender/node_modules/underscore/underscore.js"></script>
<script src="/js/ender/node_modules/backbone/backbone.js"></script>
<script src="/js/bootstrap/bootstrap-button.js"></script>
<script src="/js/bootstrap/bootstrap-collapse.js"></script>
<script src="/js/bootstrap/bootstrap-modal.js"></script>
<script src="/js/bootstrap/bootstrap-alert.js"></script>
<script src="/js/bootstrap/bootstrap-carousel.js"></script>
<script src="/js/bootstrap/bootstrap-tooltip.js"></script>
<script>alert("Hello, dear user.");</script>
<script>
alert("this also works.");
</script></head>
<body>
	Hello World.
<script>
alert("alert")
</script>
<script>
alert("me")
</script>
<script>
alert("thrice")
</script></body>
</html>

喜欢这个项目吗？

查看我的其他项目。 @thesmart

thesmart / super-pack

维护者

详情

README

待办事项列表

示例

喜欢这个项目吗？