Como usar o AsseticBundle no Symfony?

O que é o AsseticBundle?

O AsseticBundle é um complemento do Symfony que ajuda a gerenciar ativos em projetos. Ou seja, o pacote gerencia como esses ativos (como CSS, JavaScript e imagens) são mantidos e compostos. Ele também pode otimizar e compactar esses recursos para melhor desempenho.

Como instalar o AsseticBundle no Symfony?

Para instalar o AsseticBundle, você precisará usar o Composer. A primeira coisa a fazer é adicionar a seguinte linha ao seu compositor JSON:

 "assetic/assetic-bundle": "^2.8" 

Depois disso, use o seguinte comando no terminal:

 composer update 

Isso garantirá que você tenha a versão mais recente do pacote.

Como configurar o AsseticBundle no Symfony?

Depois de instalar o AsseticBundle, você precisará configurá-lo. O arquivo config.yml é o lugar onde você adicionará suas configurações. Para configurar o AsseticBundle, adicione o seguinte:

    assetic:

        filters:

            cssrewrite: ~

        bundles: [AppBundle]

O código acima adicionará o filtro “cssrewrite” e também adiciona o AppBundle.

Como usar o AsseticBundle com o Twig?

O Twig é um motor de modelo para o Symfony. Para usar o AsseticBundle com o Twig, você precisará usar o seguinte:

 {{  asset ('@ AppBundle / Resources / public / css / style.css') }} 

Isso criará uma referência ao ativo CSS.

Como usar o AsseticBundle com o CSS e o JS?

Para usar o AsseticBundle com CSS e JS, você precisará adicionar o seguinte código ao seu layout:

 {% block stylesheets%}

        {% stylesheets filter='cssrewrite'

            'bundles/app/css/*' %}
                
        {% endstylesheets %}

{% endblock %}

{% block javascripts %}

        {% javascripts

            'bundles/app/js/*'

        %}

            

        {% endjavascripts %}

{% endblock%} 

Isso carregará todas as folhas de estilo CSS e scripts JS no seu projeto.

O que é um método AsseticBundle?

Um método AsseticBundle é uma classe do Symfony que é usada como um filtro no AsseticBundle. Essa classe pode ser usada para otimização, compactação ou até mesmo para trabalhar com linguagens como SASS.

Como criar um novo método AsseticBundle?

Para criar um novo método AsseticBundle, você precisará criar uma nova classe em seu diretório de compatibilidade. Aqui está um exemplo:

 namespace AppBundleAsseticFilter;

use AsseticAssetAssetInterface;
class TestFilter

{

    public function filterLoad(AssetInterface $asset)

    {

        $content = $asset->getContent();

        $content = str_replace('foo', 'bar', $content);

        $asset->setContent($content);

    }
    public function filterDump(AssetInterface $asset)

    {

    }

} 

Você também precisará adicionar sua nova classe ao arquivo de configuração do AsseticBundle:

 services:

    app_test_filter:

        class: AppBundleAsseticFilterTestFilter 

Como usar o filtro de compressão CSS no AsseticBundle?

Se você deseja compactar seu CSS, você pode usar o filtro de compressão CSS no AsseticBundle. Para aplicar o filtro, adicione o seguinte ao seu arquivo de configuração do AsseticBundle:

 filters:

        cssmin:

            bin: /usr/bin/yui-compressor

            apply_to:

                - ".css$" 

Isso comprimirá todos os ativos CSS no seu projeto.

Como usar o filtro de compressão JS no AsseticBundle?

Para compactar seu JS, use o filtro de compressão JS no AsseticBundle. Para usar o filtro, adicione o seguinte ao seu arquivo de configuração do AsseticBundle:

 filters:

        jsmin:

            bin: /usr/bin/uglifyjs 

Isso comprimirá todos os ativos JS no seu projeto.

Como usar o AsseticBundle para cache?

O AsseticBundle também pode ser usado para caching. Para fazer isso, mudaremos a configuração do arquivo YAML do AsseticBundle para usar o modo de cache. Aqui está o código:

 assetic:

        debug: '%kernel.debug%'

        use_controller: '%kernel.debug%'

        filters:

            cssrewrite: ~

            cssmin: ~

            jsmin: ~

        assets:

            homepage_js:

                inputs:

                    - '@AppBundle/Resources/public/js/script.js'

                output: 'js/homepage.js'

                filters: [jsmin]

                cache: true 

O uso do cache ajuda o processo de carregamento do seu site.