README

将 Assetic 添加到 Fwk\Core 应用程序。

安装

1: 安装源代码

{
    "require": {
        "nitronet/fwk-assetic": "dev-master",
    }
}

如果你不使用 Composer，你仍然可以下载此存储库并将其添加到你的 include_path PSR-0 兼容

2: 配置 Assetic 作为服务

在您的 Di 容器中配置 Assetic 类，并根据您的需求进行调整。为了使其可定制，我们还将使用一些 INI 属性

[services]
; :packageDir is the directory where your service.xml is.
assetic.assets.directory = :packageDir/MyApp/templates/assets
assetic.debug = true
assetic.action.name = Asset

services.xml

<!-- Assetic AssetFactory -->
<class-definition name="assetic.AssetFactory" class="Assetic\Factory\AssetFactory" shared="true">
    <argument>:assetic.assets.directory</argument>
    <argument>:assetic.debug</argument>
    <call method="setFilterManager">
        <argument>@assetic.FilterManager</argument>
    </call>
</class-definition>

<!-- Assetic FilterManager -->
<class-definition name="assetic.FilterManager" class="Assetic\FilterManager" shared="true" />

<!-- Fwk Service -->
<class-definition name="assetic" class="FwkAssetic\AssetsService" shared="true">
    <argument>@assetic.AssetFactory</argument>
</class-definition>

<!-- Fwk ViewHelper -->
<class-definition name="_vh.AsseticViewHelper" class="FwkAssetic\AssetViewHelper" shared="true">
    <argument desc="Name of the Fwk Service">assetic</argument>
    <argument desc="Name of your Url ViewHelper">url</argument>
    <argument desc="Enable Assetic debugging">:assetic.debug</argument>
    <argument desc="Asset action name">:assetic.action.name</argument>
</class-definition>

接下来，您想要将 ViewHelper 添加到您的 ViewHelperService

<!-- You probably already have this one -->
<class-definition name="viewHelper" class="Fwk\Core\Components\ViewHelper\ViewHelperService" shared="true">
    <!-- ... -->
    <call method="add">
        <argument desc="Name of the helper (to be used in templates)">asset</argument>
        <argument desc="Instance of the AsseticViewHelper">@_vh.AsseticViewHelper</argument>
    </call>
</class-definition>

3: 向 Asset Action 注册操作和路由

fwk.xml

<action name="Asset" shortcut="FwkAssetic\Controllers\AssetAction:show" />

如果您使用 UrlRewriterService，您还可以自定义操作路由

<url-rewrite>
    <!-- ... --->
    <url route="/asset/:asset" action="Asset">
        <param name="asset" regex=".*" />
    </url>
</url-rewrite>

4: 完成操作！

现在您可以在模板中使用 viewHelper，如下所示

<?php foreach($this->_helper->asset(array('/path/to/site.css'), $filters = array(), $output = "site") as $asset): ?>
    <link href="<?php echo $asset; ?>" media="all" rel="stylesheet" type="text/css" />
<?php endforeach; ?>

或者如果您使用 Twig

{% for asset in _helper.asset(['/path/to/site.css'], [], 'site', true) %}
    <link href="{{ asset }}" media="all" rel="stylesheet" type="text/css" />
{% endfor %}

CssRewrite

为了显示在 CSS 中引用的图像和资源，您必须使用“重写”过滤器。

回到您的 services.xml，声明过滤器定义并更改您的 assetic.FilterManager 定义为以下内容

<!-- Assetic FilterManager -->
<class-definition name="assetic.FilterManager" class="Assetic\FilterManager" shared="true">
    <call method="set">
        <argument desc="Filter alias">cssrewrite</argument>
        <argument desc="Filter instance">@assetic.CssRewriteFilter</argument>
    </call>
</class-definition>

<!-- CssRewriteFilter -->
<class-definition name="assetic.CssRewriteFilter" class="FwkAssetic\Filters\CssRewriteFilter" shared="true">
    <argument>@_vh.AsseticViewHelper</argument>
</class-definition>

现在，只需在模板中调用 cssrewrite 过滤器即可

<?php foreach($this->_helper->asset('/path/to/site.css', 'cssrewrite') as $asset): ?>
    <link href="<?php echo $asset; ?>" media="all" rel="stylesheet" type="text/css" />
<?php endforeach; ?>

完成操作！

配置缓存

为了防止资产 URL 上的 404 错误，您必须使用 Assetic 缓存机制，这需要更多的配置...

1: 配置变量和缓存目录

创建一个目录，让 Assetic 可以在其中缓存资产

$ mkdir /path/to/app/cache 
$ chmod 777 /path/to/app/cache

配置应用程序

assetic.use.cache = true
assetic.cache.directory = /path/to/app/cache
; could be content or modification 
assetic.cache.strategy = content

2: 配置服务

将以下定义添加到您的 services.xml 中

<!-- Assetic FilesystemCache -->
<class-definition name="assetic.FilesystemCache" class="Assetic\Cache\FilesystemCache" shared="true">
    <argument>:assetic.cache.directory</argument>
</class-definition>
<!-- Assetic CacheBustingWorker -->
<class-definition name="assetic.CacheBustingWorker" class="Assetic\Factory\Worker\CacheBustingWorker" shared="true">
    <argument>:assetic.cache.strategy</argument>
</class-definition>

并重新配置先前的定义

<!-- Assetic AssetFactory -->
<class-definition name="assetic.AssetFactory" class="Assetic\Factory\AssetFactory" shared="true">
    <argument>:assetic.assets.directory</argument>
    <argument>:assetic.debug</argument>
    <call method="setFilterManager">
        <argument>@assetic.FilterManager</argument>
    </call>
    <!-- enable assetic cache -->
    <call method="addWorker">
        <argument>@assetic.CacheBustingWorker</argument>
    </call>
</class-definition>

<!-- Fwk Service -->
<class-definition name="assetic" class="FwkAssetic\AssetsService" shared="true">
    <argument>@assetic.AssetFactory</argument>
    <!-- enable assetic cache -->
    <argument>@assetic.FilesystemCache</argument>
</class-definition>

3: 完成操作！

现在您可以刷新页面并欣赏您的前端技能了 ;)

资产快捷方式

有时，如果您要引用的资产目录不在 :assetic.assets.directory 中，定义快捷方式可能会很有用。

1: 创建快捷方式数组

<!-- Assets shortcuts -->
<array-definition name="assetic.Shortcuts">
    <param key="bower">:packageDir/../public/bower_components</param>
    <param key="theme">:packageDir/templates/assets</param>
</array-definition>

2: 在您的 AssetsService 中添加方法调用

<!-- Assets Service -->
<class-definition name="assetic" class="FwkAssetic\AssetsService" shared="true">
    <argument>@assetic.AssetFactory</argument>
    <argument>@assetic.FilesystemCache</argument>
    <!-- add shortcuts -->
    <call method="addShortcuts">
        <argument>@assetic.Shortcuts</argument>
    </call>
</class-definition>

3: 使用您的快捷方式

现在，定义了快捷方式后，我们可以轻松调用我们的资产

<?php foreach($this->_helper->asset(array('+bower/bootstrap/css/bootstrap.css')) as $asset): ?>
    <link href="<?php echo $asset; ?>" media="all" rel="stylesheet" type="text/css" />
<?php endforeach; ?>

完整的 XML 配置

<!--
    ASSETIC (fwk-assetic)
-->
<class-definition name="assetic.CssRewriteFilter" class="FwkAssetic\Filters\CssRewriteFilter" shared="true">
    <argument>@_vh.AsseticViewHelper</argument>
</class-definition>
<class-definition name="assetic.FilterManager" class="Assetic\FilterManager" shared="true">
    <call method="set">
        <argument>cssrewrite</argument>
        <argument>@assetic.CssRewriteFilter</argument>
    </call>
</class-definition>
<class-definition name="assetic.FilesystemCache" class="Assetic\Cache\FilesystemCache" shared="true">
    <argument>:assetic.cache.directory</argument>
</class-definition>
<class-definition name="assetic.CacheBustingWorker" class="Assetic\Factory\Worker\CacheBustingWorker" shared="true">
    <argument>:assetic.cache.strategy</argument>
</class-definition>
<class-definition name="assetic.AssetFactory" class="Assetic\Factory\AssetFactory" shared="true">
    <argument>:assetic.assets.directory</argument>
    <argument>:assetic.debug</argument>
    <call method="setFilterManager">
        <argument>@assetic.FilterManager</argument>
    </call>
    <!-- enable assetic cache -->
    <call method="addWorker">
        <argument>@assetic.CacheBustingWorker</argument>
    </call>
</class-definition>

<!-- Assets Service -->
<class-definition name="assetic" class="FwkAssetic\AssetsService" shared="true">
    <argument>@assetic.AssetFactory</argument>
    <argument>@assetic.FilesystemCache</argument>
    <!-- add shortcuts -->
    <call method="addShortcuts">
        <argument>@assetic.Shortcuts</argument>
    </call>
</class-definition>

<class-definition name="_vh.AsseticViewHelper" class="\FwkAssetic\AssetViewHelper" shared="true">
    <argument>assetic</argument>
    <argument>url</argument>
    <argument>:assetic.debug</argument>
    <argument>:assetic.action.name</argument>
</class-definition>

<!-- Assets shortcuts -->
<array-definition name="assetic.Shortcuts">
    <param key="bower">:packageDir/../public/bower_components</param>
    <param key="theme">:packageDir/templates/assets</param>
</array-definition>

贡献 / 社区

GitHub 上的问题： https://github.com/nitronet/fwk-assetic/issues
关注 Fwk 的 Twitter： @phpfwk

nitronet / fwk-assetic

维护者

详细信息