How to Minify CSS in Rails 4

How do I minify CSS in Rails 4?

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.

Rails not minifying

This answer applies for rails 4

One of the reasons when rails-4 won't minify assets is when the RAILS_ENV is not set to production.

This usually happens when you pre-compile assets and run webrick in prod mode using:

rails s -e 'production'

but still the resulting application.css and application.js are concatenated but not minified.

To solve this, use the following to specify the env while precompiling assets:

$ RAILS_ENV=production bundle exec rake assets:precompile

Also if you are upgrading from rails 3 to rails 4, please note that config.assets.compress = true directive in production.rb is not longer effective for rails 4. You'll need to add the following directives in your config/environments/production.rb file for it to minify js and css files:

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier # make sure the 'uglifier' gem is included before adding this line
  config.assets.css_compressor = :sass # if you are using the sass-rails gem, this line is unnecessary

Ruby on Rails 4.2 Asset pipeline not minifying/compressing the application-fingerprinted.js JS file

I know what I am going to say is not conventional, but your aproach hasn't been so explicit, you should try adding the explicit compress call you have made false in development

/config/environments/production.rb

MyApp::Application.configure do
  # Compress assets please
  config.assets.compress = true
  # ... other stuff
end

After that clean your assets and regenerate them with

$ bundle exec rake assets:clobber
$ RAILS_ENV=production bundle exec rake assets:precompile

Rails Asset Pipeline: compressed/minified CSS loaded but not styling document

It took me almost a week, but I finally came to a solution that is acceptable.

The first step, was realizing that there was something wrong with the css compression process. I found this out because I had removed this line from the config file:
config.assets.css_compressor = :yui. Once removed, the css_compressor fell back to its default compressor, which is sass.

Now, when doing rake assets:precompile, I get the following error:

➜  stylesheets git:(master) ✗ rake assets:precompile
(in /home/ubuntu/spice-conduit)
rake aborted!
Sass::SyntaxError: Invalid CSS after "    filter: progid": expected ";", was ": DXImageTransf..."
  (in /home/ubuntu/spice-conduit/app/assets/stylesheets/application.css)
(sass):3566
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1147:in `expected'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1085:in `expected'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1080:in `tok!'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:586:in `block in declaration_or_ruleset'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `call'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `rethrow'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:592:in `declaration_or_ruleset'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:554:in `block_child'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:546:in `block_contents'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:535:in `block'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:52

It looks like the compressor doesn't like certain Microsoft related gradient css rules.

FIX
I removed several of the BOWER style asset gems and replaced them with rails specific gems. My new gem file looks like this:

As you can see, I am now using rails specific sprockets compatible bootstrap an font-awesome gems

My application.css file now looks like this:

 11  *= require_tree .
 12  *= require_self
 13  *= require font-awesome
 14  *= require vendors
 15  *= require bootstrap
 16  *= require sweetalert
 17  *= require jquery-ui
 18  */

And i've added a new file called app.scss.css in the app/assets/stylesheets directory:

Summary: By removing several 'rails-assets-BOWER-PACKAGE' style gems, and replacing them with SASS/sprockets compatible and rails specific gems, now rake assets:precompiles works and the browser correctly displays the served CSS.....

I need a css minifier in ruby

I think I have found my gem:

'ruby-yui-compressor'

All I need to do:

gem "yui-compressor", "~> 0.9.6", :require => "yui/compressor"
....
compressor = YUI::CssCompressor.new
compressor.compress 'body {line-height: 1}            \ntable {border-collapse: collapse;    border-spacing: 0}'

=> "body{line-height:1}\\ntable{border-collapse:collapse;border-spacing:0}" 

How to minify java script files in a rails application?

In production.rb

config.assets.compile = true

RAILS_ENV=production rake assets:precompile

and push all compressed js/css files. It will save your load time and compress all js/css/images.

---

Related Topics