README

提供一个新的Assetic过滤器，用于CSS文件，允许您在CSS中使用"@MyBundle"语法。它还向CSS文件公开DI容器参数

示例1 - 使用@MyBundle语法

background: url(@MyBundle/Resources/public/images/backgrounds.png);

示例2 - 使用DI容器语法

background: url(%kernel.root_dir%/../vendor/twitter/bootstrap/img/sprite-map.png);

示例3 - 您甚至可以同时使用两者

background: url(@MyBundle/Resources/public/images/%site.mood%/backgrounds.png);

它还转换所有图像为资产，并允许您使用现有的资产过滤器（如optipng用于pngs）

安装

Symfony 2.1.x

将require行添加到composer.json中

"require": {
    ....
    "smurfy/asseticcssbundleimages-bundle": "dev-master"
    ...
}

并更新composer：

php composer.phar update

将SmurfyAsseticCssBundleImagesBundle添加到您的应用程序内核中

// app/AppKernel.php

public function registerBundles()
{
    return array(
        new Symfony\Bundle\SecurityBundle\SecurityBundle(),
        // ...
        new Smurfy\AsseticCssBundleImagesBundle\SmurfyAsseticCssBundleImagesBundle(),
        // ...
    );
}

Symfony 2.0.x

将SmurfyAsseticCssBundleImagesBundle添加到您的vendor/bundles/目录中

在您的deps文件中添加以下行：

[SmurfyAsseticCssBundleImagesBundle]
    git=git://github.com/smurfy/SmurfyAsseticCssBundleImagesBundle.git
    target=bundles/Smurfy/AsseticCssBundleImagesBundle

运行 vendors 脚本：

./bin/vendors install

将 Smurfy 命名空间添加到您的自动加载器中

// app/autoload.php
$loader->registerNamespaces(array(
    'Smurfy' => __DIR__.'/../vendor/bundles',
    // your other namespaces
);

将SmurfyAsseticCssBundleImagesBundle添加到您的应用程序内核中

// app/AppKernel.php

public function registerBundles()
{
    return array(
        new Symfony\Bundle\SecurityBundle\SecurityBundle(),
        // ...
        new Smurfy\AsseticCssBundleImagesBundle\SmurfyAsseticCssBundleImagesBundle(),
        // ...
    );
}

配置

默认情况下，过滤器将所有文件输出到/assetic/，但您可以更改这一点，您还可以指定应该通过扩展名使用哪个过滤器。

smurfy_assetic_css_bundle_images:
    output: assetic/*
    absolute: true
    lessUrlRewriteWorkaround: false
    filters:
        png:
            - optipng
        jpg:
            - jpegoptim

示例用法

在您的twig模板中启用过滤器

{% stylesheets
    '@MyBundle/Resources/public/css/*' filter='cssbundleimages' output='assetic/*.css'
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

之后，您可以在CSS文件中使用类似以下内容

.body {
    background: url(@MyBundle/Resources/public/images/backgrounds.png);
}

LESS 支持

Less 完全受支持。只需确保在cssbundleimages过滤器之前加载less过滤器。

请注意，如果您在子目录中导入其他less文件并且url标签使用相对路径（不以/开头），则less会对"url"标签进行URL重写。之后，cssbundleimages过滤器将不再工作，因为URL不再以@BundleName开头，而是以subdirectory/@BundleName开头。存在lessUrlRewriteWorkaround配置参数，允许您使用/@BundleName。

.body {
    background: url(/@MyBundle/Resources/public/images/backgrounds.png);
}

这样，less就不会进行URL重写，因为它将URL检测为绝对路径。

总结

Assetic控制器支持正在运行，但它总是会重新扫描所有CSS文件，这当然不是那么快。建议使用assetic:watch（在assetic包的老版本中为assetic:dump --watch）对于我的项目来说没问题，但在大型开发环境中可能会成为瓶颈。