Como Minificar JavaScripts e Folhas de Estilo com o YUI Compressor¶
A Yahoo! oferece um excelente utilitário, chamado YUI Compressor, para minificar JavaScripts e folhas de estilo, assim, eles são carregados mais rapidamente. Graças ao Assetic, você pode tirar proveito desta ferramenta de forma muito fácil.
Baixe o JAR do YUI Compressor¶
O YUI Compressor é escrito em Java e distribuído como um JAR. Faça o download do JAR
no site da Yahoo! e salve-o em app/Resources/java/yuicompressor.jar
.
Configure os Filtros do YUI¶
Agora você precisa configurar dois filtros Assetic em sua aplicação, um para minificar os JavaScripts com o YUI Compressor e um para minificar as folhas de estilo:
- YAML
# app/config/config.yml assetic: filters: yui_css: jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar" yui_js: jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
- XML
<!-- app/config/config.xml --> <assetic:config> <assetic:filter name="yui_css" jar="%kernel.root_dir%/Resources/java/yuicompressor.jar" /> <assetic:filter name="yui_js" jar="%kernel.root_dir%/Resources/java/yuicompressor.jar" /> </assetic:config>
- PHP
// app/config/config.php $container->loadFromExtension('assetic', array( 'filters' => array( 'yui_css' => array( 'jar' => '%kernel.root_dir%/Resources/java/yuicompressor.jar', ), 'yui_js' => array( 'jar' => '%kernel.root_dir%/Resources/java/yuicompressor.jar', ), ), ));
Você agora tem acesso a dois novos filtros Assetic em sua aplicação:
yui_css
e yui_js
. Eles utilizarão o YUI Compressor para minificar
as folhas de estilo e JavaScripts, respectivamente.
Minifique os seus Assets¶
Você agora tem o YUI Compressor configurado, mas nada vai acontecer até aplicar um desses filtros para um asset. Uma vez que os seus assets fazem parte da camada de visão, este trabalho é feito em seus templates:
- Twig
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='yui_js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
- PHP
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*'), array('yui_js')) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Nota
O exemplo acima assume que você tem um bundle chamado AcmeFooBundle
e os seus arquivos JavaScript estão no diretório``Resources/public/js`` sob
o seu bundle. Entretante, isso não é importante - você pode incluir os seus arquivos
JavaScript, não importa onde eles estiverem.
Com a adição do filtro yui_js
para as tags asset acima, você deve agora ver
os JavaScripts minificados sendo carregados muito mais rápido. O mesmo processo
pode ser repetido para minificar as suas folhas de estilo.
- Twig
{% stylesheets '@AcmeFooBundle/Resources/public/css/*' filter='yui_css' %} <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" /> {% endstylesheets %}
- PHP
<?php foreach ($view['assetic']->stylesheets( array('@AcmeFooBundle/Resources/public/css/*'), array('yui_css')) as $url): ?> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $view->escape($url) ?>" /> <?php endforeach; ?>
Desative a minificação no modo de depuração¶
Os JavaScripts e as folhas de estilo minificados são muito difíceis de ler, e muito menos
depurar. Devido a isso, o Assetic permite desabilitar um certo filtro quando a sua
aplicação está no modo de depuração. Você pode fazer isso prefixando o nome do filtro
em seu template com um ponto de interrogação: ?
. Isto diz ao Assetic para apenas
aplicar esse filtro quando o modo de depuração está desligado.
- Twig
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='?yui_js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
- PHP
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*'), array('?yui_js')) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>