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:
config.gem "jammit"
No terminal rode o comando:
sudo rake gems:install
Edite o arquivo config/routes.rb e adicione uma rota específica para o jammit:
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.
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.cssExistem 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:
<%= 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.
def javascript(*files)
content_for(:js) { javascript_include_tag(*files) }
end
def stylesheet(*files)
content_for(:css) { stylesheet_link_tag(*files) }
endCom estes helpers adicionados você pode dentro de um template adicionar o código abaixo em qualquer lugar.
<% javascript :outro_pacote_de_js %> <% stylesheet :outro_pacote_de_css %>
Se você gostou deste artigo me indique no working with rails