How do I minify CSS in Rails 4?

Question

I tried the following, however I look at the CSS source and it does not minify! I restarted the server several dozen times. I turned off cache in the browser. I also tried the 'yui-compressor' gem.

config/environments/development.rb

  config.assets.debug = false
  config.assets.css_compressor = :sass
  config.assets.compile = true

Gemfile

group :assets do
  # Add any compass extensions here
  # Use SCSS for stylesheets
  gem 'sass-rails', '~> 4.0.0'

Reference

http://edgeguides.rubyonrails.org/asset_pipeline.html#customizing-the-pipeline

Version

WEBrick 1.3.1, ruby 2.0.0 (2013-06-27) [i386-mingw32], Rails 4.0.3

Nitpicking

If you are in development environment this is normal: assets are supposed to be compressed during a deployment and used compressed in production environment – Vashti

I deployed it and it still won't compress. It has comments in the CSS! I set config.assets.css_compressor = :sass in production.rb. I deploy with git push heroku. – Nitpicking

How do you deploy? using capistrano or manuall? – Vashti

Answer 1

I was having the same problem in my production environment, where I couldn't get the CSS to minify upon deploying to Heroku. After turning on compression with the following:

production.rb

config.assets.css_compressor = :sass

Gemfile

gem 'sass-rails', '~> 4.0.0'    

I managed to get it to minify by updating the assets version:

production.rb

config.assets.version = '1.1' # was '1.0'

Doing a few tests afterwards, I found that updating the source CSS/SASS had the same effect. So try updating your stylesheets (as opposed to only the config), which should "kickstart" the minification process when Heroku precompiles your assets after you push, without needing to update the assets version.

Singe

Answer 2

Precompile

You'll need to precompile the assets

Rails minifies your assets if you precompile them. This is only for production, but means you're able to use files such as application.js and application.css with minified code

Try this:

$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Precompiled Assets"
$ git push heroku master

This will precompile (& minify) your assets, allowing you to use the compiled files in production

Coition

Doesn't Heroku already compile the assets automatically? Preparing app for Rails asset pipeline Running: rake assets:precompile Asset precompilation completed (3.64s) Cleaning assets Running: rake assets:clean. How do I view the minified version in development, to test that everything is working? The JS is minified. Is there a way to minify the CSS without having to remember to check it into GIT each time, and clutter up the file system every time there is a deploy? – Nitpicking

Answer 3

This works to me rails-html-css-js-gzip-compression on Ruby 2.2.0 - Rails 4.2.0

Voletta

By the author's own admission, this method should not be used, as it adds significant overhead to every.single.request. – Manger

Answer 4

If you are looking for a way to compress CSS without an asset pipeline, here are your two options.

Ruby YUI Compressor but beware this gem has Java dependency

compressor = YUI::CssCompressor.new
compressor.compress(<<-END_CSS)
  div.error {
    color: red;
  }
  div.warning {
    display: none;
  }
END_CSS
# => "div.error{color:red;}div.warning{display:none;}"

CSS Minify gem with ruby native support, which is much better if you ask me

require 'cssminify'

CSSminify.compress('/* a comment */ .test { display: block; }')
# => minified CSS

CSSminify.compress(File.read('path/to/styles.css'))
# => minified CSS

Not sure how Rails does it under the hood. But had some problems accessing Sprockets internal logic. If anybody could help, I would be greatful.

Biforate

Answer 5

If you want to minify CSS using's Rails internal mechanics you can do this.

minified = Sass::Engine.new(content, syntax: :scss, style: :compressed).render
AutoprefixerRails.process(minified).css

Biforate

Answer 6

This was failing for me because I had image-url("/img/header/gradient.png") instead of image-url("img/header/gradient.png"). The moral: don't use a slash at the beginning of the path.

Nacre

What does this have to do with the question? – Atomism

I spent several hours debugging a situation where the lack of the slash prevented fingerprinting from working correctly. I wanted to let others know why CSS would minify without fingerprinting working. – Nacre