Marcio Trindade

Jammit uma nova opção pra compactar arquivos

A um certo tempo eu venho falando do Jammit uma gem que me chamou a atenção e mudou minha forma de trabalhar com a parte de interface de meus projetos.

Praticamente a mesma coisa que o asset_packager que muitos estão acostumados a utilizar, porém ha algumas diferenças que me fizeram mudar como por exemplo você ter a opção de escolher qual compressor usar o YUI Compressor ou o Google Clouser que pode gerar um arquivo até 40% menor. Outra vantagem é no css que ele utiliza data-uri (um código dentro de um padrão que quando lido pelo navegador gera a imagem dinamicamente) em todas as imagens utilizadas em seu css que estão dentro do diretório embed e que menores do que 32 KB.

Então agora você para e começa a pensar, será que vale a pena utilizar tal técnica em seus projetos? Depende. Data-uri não é uma bala de prata e deve ser feito um estudo de quando usar e quando não utilizar. Porém vale lembrar que se o seu css ficar muito grande você ainda conta com um gzip pra diminuir o tamanho do arquivo e um cache de modo que o usuário só precise baixar o css uma única vez. Bom então vamos ver como utilizar esta gem.

Adicione alinha abaixo no environment.rb:

environment.rb
config.gem "jammit"

No terminal rode o comando:

console
sudo rake gems:install

Edite o arquivo config/routes.rb e adicione uma rota específica para o jammit:

config/routes.rb
ActionController::Routing::Routes.draw do |map|
  Jammit::Routes.draw(map)
  ...
end

crie o arquivo config/assets.yml e sete suas configurações e os arquivos que serão utilizados.

config/assets.yml
embed_images: on

javascript_compressor: closure

javascripts:
  front:
    - public/javascripts/jquery.js
    - public/javascripts/application.js
    - public/javascripts/default.js
  admin:
    - public/javascripts/jquery.js
    - public/javascripts/jquery-ui.js
    - public/javascripts/application.js
    - public/javascripts/fckeditor/fckeditor.js

stylesheets:
  front:
    - public/stylesheets/default.css
  admin:
    - public/stylesheets/admin/default.css

Existem muitas outras configurações que você pode utilizar, pra saber mais veja a documentação do Jammit

Adicione os pacotes gerados em seu layout utilizando os helpers da gem:

application.html.erb
<%= include_stylesheets :common, :workspace, :media => 'all' %>
<%= yield :css %>

<%= include_javascripts :workspace %>
<%= yield :js %>

Seguindo os padrões do Ryan Bates eu criei dois helpers pra facilitar a inclusão de css e/ou javascript nos templates, porém vale lembrar que você deve criar os pacotes no assests.yml antes de chama-los nos helpers.

application_helper.rb
def javascript(_files)
  content_for(:js) { javascript_include_tag(_files) }
end

def stylesheet(_files)
  content_for(:css) { stylesheet_link_tag(_files) }
end

Com estes helpers adicionados você pode dentro de um template adicionar o código abaixo em qualquer lugar.

index.html.erb
<% javascript :outro_pacote_de_js %>
<% stylesheet :outro_pacote_de_css %>

Se você gostou deste artigo me indique no working with rails