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; ?>
  

Note

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; ?>