README

这是一个用于Elefant CMS的应用程序，它使用Assetic库预编译和压缩JavaScript和CSS。

它还支持编译以下格式

将此应用程序放入您的apps/文件夹。
打开文件apps/assetic/conf/config.php，设置您选择的压缩器/编译器路径（SASS、CoffeeScript、Handlebars等）。

默认情况下，它将使用JSMinPlus进行JavaScript压缩和CSSMin进行CSS压缩。其他选项包括UglifyJS2/UglifyCSS和YUI Compressor。

在单个脚本上使用Assetic

<script src="{# assetic/js/my_script.js #}"></script>

这将输出类似的内容

<script src="/cache/assetic/js_my_script.js?v=12"></script>

类似地，您也可以对CSS文件做同样的处理

<link rel="stylesheet" link="{# assetic/css/style.css #}" />

将产生

<link rel="styelsheet" link="/cache/assetic/css_style.css?v=12" />

一次对多个脚本或样式表使用Assetic

<head>
{# assetic/myscripts?js[]=js/jquery.js&js[]=js/jquery.verify_values.js #}
</head>

这将产生

<script src="/cache/assetic/myscripts.js?v=12"></script>

注意：将myscripts更改为用于保存缓存文件的名称。否则，将使用all.js。

文件列表也可以像这样跨多行写入

<head>
{# assetic/myscripts
	?js[]=js/jquery.js
	&js[]=js/jquery.verify_values.js #}
</head>

要重新生成脚本，请登录Elefant并转到工具 > Assetic，然后单击重新编译资产。这将更改所有模板的修改时间，以便在下次在浏览器中运行时重新生成。此处的?v=数字也将重新生成，以便浏览器始终自动使用最新版本。

对于开发，您还可以将标记更改为使用Elefant的{! !}标记，这将使Assetic编译过程在每次请求时重新加载

<script src="{! assetic/js/my_script.js !}"></script>

它足够智能，不会在原始文件没有更改的情况下重新生成缓存，以减少开发期间页面加载时间。

模板标记{# #}将在布局首次加载时渲染脚本，并将结果HTML硬编码到模板中，以便后续请求，因此处理程序仅在第一次调用。这使得此插件在提供优化的CSS和JavaScript时非常快，因为第一次加载后，编译后的脚本将直接调用，跳过后续请求的插件。

您可以通过在Web服务器配置中启用GZIP输出来实现额外的优化。

为了在客户端更快地执行Handlebars模板，同时包括只有编译器而没有运行时的Handlebars，请按照以下步骤操作

1. 将您的Handlebars模板保存为带有.handlebars文件扩展名的应用程序视图文件夹中的文件。例如

<!-- apps/myapp/views/hello.handlebars -->
<p>Hello {{name}}</p>

2. 在布局模板中包含以下标记以预编译它们

{! assetic/handlebars !}

3. 在上述包含编译模板后，您可以通过以下方式包含它们

<script src="/cache/assetic/handlebars.compiled.js"></script>

这还包括Handlebars运行时，但不包括编译器，供您使用。

4. 调用一个模板，只需像这样引用它

<script>
$('#my-div').html (Handlebars.templates.my_template (data));
</script>

或者，您可以从命令行像这样运行Handlebars编译器

$ cd /path/to/your/website
$ ./elefant assetic/handlebars

这代替了上面的步骤2，但请注意，每次您修改模板或使用--auto选项监视模板更改并自动重新编译时，都需要再次调用它

$ cd /path/to/your/website
$ ./elefant assetic/handlebars --auto

elefant / app-assetic