Running with Ruby

Tag: CSS (page 1 of 3)

Rails 3.1 RC5 + CSS and JS compression + undefined method `compress’ for :scss:Symbol in production mode

When running Rails 3.1RC5 with environments/production.rb containing:

  config.assets.js_compressor  = :uglifier
  config.assets.css_compressor = :scss
  config.assets.compress = true

probably you will see this type of exception:

undefined method `compress' for :scss:Symbol
  (in /home/path/app/assets/stylesheets/layouts/admin/default/init.scss)

But why? Lets go deeper ;) JS and CSS compression is quite simple. We have uncompressed stuff – we throw it into compressor and we have compressed version on output. Rails compression engine executes method called compress with one string parameter containing uncompressed stuff. We should also return string – containing input string compressed version.

Since we point out symbol as our default compressor – Rails will try to execute compress on this symbol. How can we fix this? There are two ways. First one is easy – screw compression:

  config.assets.compress = false

Second one is slightly more difficult (but still easy). We just need to attach our own compressors.

Javascript compression

Lets use Uglifier to compress our JS. We need to add it into gemfile

gem 'uglifier'

and we need to tell Rails – that it should use it to compress JS(in environments/production.rb):

  # Put this on top of production.rb file
  require 'uglifier'
  # Somewhere in the "middle"
  config.assets.js_compressor  = Uglifier.new

CSS compression

I compress CSS using my own compressor. It is a hybrid compressor including SASS and my own CSS Image Embeddera. I’ve managed to have SASS one line compression and embedded css backgrounds. How to use it?

Add into gemfile:

gem 'css_image_embedder'

and then attach my compressor in environments/production.rb:

  img_root = File.join(Rails.root, 'public')
  config.assets.css_compressor = CssImageEmbedder::Compressor.new(img_root)

Conclusions

CSS and JS compression worked really well already in Rails 3.0. However now we can easily get into whole process and do cool stuff (like css image embedding ;) ).

[Update] One more thing: from now I will be posting only in english.

Rails + Passenger vs htaccess, cache i gzip (mod_deflate)

Dzisiaj będzie krótko i treściwie. Co chcemy osiągnąć? Chcemy:

  • Serwować statyczny cache z subkatalogu /cache katalogu /public (czyli /public/cache)
  • Kompresować gzipem pliki CSS i JS

Jak?

Tworzymy plik .htaccess w katalogu /public naszego projektu a następnie wklejamy do niego to:

RewriteEngine On

RewriteCond %{REQUEST_URI} ^([^.]+)/$
RewriteRule ^[^.]+/$ /%1 [QSA,L]

RewriteCond %{THE_REQUEST} ^(GET|HEAD)
RewriteCond %{REQUEST_URI} ^([^.]+)$
RewriteCond %{DOCUMENT_ROOT}/cache/%1.html -f
RewriteRule ^[^.]+$ /cache/%1.html [QSA,L]

RewriteCond %{THE_REQUEST} ^(GET|HEAD)
RewriteCond %{DOCUMENT_ROOT}/cache/index.html -f
RewriteRule ^$ /cache/index.html [QSA,L]

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary

Tyle – od teraz nasze aplikacje mają zarówno cache z subkatalogu public/ jak i kompresję gzipem – dzięki czemu strona działa szybciej i zjada mniej łącza.

Olderposts

Copyright © 2018 Running with Ruby

Theme by Anders NorenUp ↑