Fala pessoal, beleza?

Tem alguém ai precisando de um compressor simples de JavaScript e CSS pra CakePHP? Se sim, então aqui é o lugar certo..

Esses dias eu precisei de um compressor/minificador para usar em um projeto em Cake mas não gostei das opções disponíveis, então decidi fazer o meu, o EasyCompressor.

O pessoal da comunidade usa bastante o AssetCompress feito pelo Mark Story, mas eu precisava de algo mais simples, sem contar de que não gosto de ter que usar um arquivo de configuração para especificar os Js e CSS que desejo comprimir ou ter que refatorar todo meu projeto alterando o método de inclusão.

Nesse post irei mostrar como instalar e usar o EasyCompressor em sua aplicação, mas primeiro, vamos conhecer um pouco mais ele.

Recursos

• Fácil de implementar e usar
• Obtém arquivos CSS e JavaScript diretamente dos blocos padrão do CakePHP (não precisa refatorar nada)
• Define cache
• Evita cache em arquivos alterados
• Sem configuração

Requisitos

• CakePHP 2.1 ou acima

Funcionamento

EasyCompressor gera um arquivo minificado para os scripts e estilos do layout e outro para os scripts/estilos de cada view. Vamos supor que você tenha 4 arquivos CSS inlcusos no layout de sua aplicação e 2 arquivos CSS específicos da view da página inicial do site, quando ativo, o compressor irá gerar um arquivo minificado contendo o conteúdo dos 4 arquivos CSS do layout e outro contendo o conteúdo dos 2 arquivos da view. Isso foi feito para o arquivo minificado do layout ser mantido em cache sem ter que fazer download em cada view carregada, mas se quiser, você pode usar apenas um arquivo de estilo/script.

Na tag HTML gerada, é adicionado uma query string com um hash md5 da soma da data de modificação de cada arquivo incluso, isso forçará o download de uma nova versão quando alguma alteração tiver sido feita em um dos arquivos.

Atualmente o EasyCompressor usa as bibliotecas JsMin e CSSMin para compressão de JavaScript e CSS respectivamente e não possui suporte para CoffeeScript, LESS e Sass pois um dos seus objetivos é ser simples e enxuto.

Instalação e uso

1- Baixe ou clone o plugin no github, crie uma pasta com nome EasyCompressor dentro de app/Plugin/ e cole os arquivos do compressor

2- Faça download das últimas versões das bibliotecas JsMin e CSSMin e coloque dentro de app/Vendor/jsmin/ e app/Vendor/cssmin/ respectivamente

3- Adicione CakePlugin::load(array('EasyCompressor' => array('routes' => true))); no arquivo app/Config/bootstrap.php para carregar o plugin

4- Adicione EasyCompressor.EasyCompressor no array de helpers usados em app/Controller/AppController

5- Inclua no layout os métodos responsáveis por obter os arquivos Js e CSS, veja abaixo

Para incluir arquivos em todas as páginas do site você pode usar:

<?php
// Adiciona arquivos no bloco 'layout_script'
$this->Html->script(array('jquery.js', 'modernizr.js'), array('inline' => false, 'block' => 'layout_script'));
// Exibe
echo $this->EasyCompressor->getLayoutScript();
?>

O código acima irá gerar um arquivo minificado com os dois arquivos, podemos usar ele para fazer uma única requisição para arquivos que não mudam no site inteiro (scripts do layout). Também podemos gerar um outro arquivo minificado contendo somente os scripts da view que está sendo carregada, veja abaixo.

<?php
// Adiciona arquivos no bloco padrão 'script'
$this->Html->script(array('carousel.js'), array('inline' => false));
// Exibe
echo $this->EasyCompressor->getViewScript();
?>

Com isso mantemos no cache os arquivos do layout e da view, só tendo que fazer download novamente ao acessar uma view ainda não visitada ou quando houver alguma alteração.

6- Agora basta setar o nível de debug para 0 em app/Config/core.php ou caso queira testar em ambiente de desenvolvimento também é possível ativar o compressor adicionando Configure::write('EasyCompressor.enabled', true); no mesmo arquivo.

Feito isso, você obterá as tags como na imagem:

Bem simples né? Como o próprio nome diz, é fácil de usar.. Deixe sua opinião nos comentários.

Até mais pessoal.