I have a Rails 5.0.0.1 app on Heroku and when I hit the developer console in Chrome and open up the CSS and JS files I can see that neither of them have been minified. This was first brought to my attention after completing a Google speed test.
This is what some of my setup looks like...
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require bootstrap-sprockets
//= require trix
//= require_tree .
application.scss
//Import bootstrap-sprockets
#import "bootstrap-sprockets";
// Import cerulean variables
#import "bootswatch/flatly/variables";
// Then bootstrap itself
#import "bootstrap";
#import "font-awesome";
// Bootstrap body padding for fixed navbar
/*body { padding-top: 60px; }*/
// And finally bootswatch style itself
#import "bootswatch/flatly/bootswatch";
// Whatever application styles you have go last
#import "overrides";
#import "trip";
I'm using the following gems:
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootswatch-rails'
gem 'bootstrap-social-rails'
gem 'bootstrap_form'
And I have the following options set in production.rb
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
I've precompiled and cleaned the assets and I've even bumped the assets version using
Rails.application.config.assets.version = '1.1'
I even nuked hell out of my assets folder using rake assets:clobber
Really at a loss now as to why none of these assets are minifying. Any help is much appreciated.
What's your Gemfile look like? Is there a JavaScript runner for the uglifier? therubyracer is often used, and I have been fairly happy with mini_racer and its enhanced performance.
In your Gemfile:
gem 'mini_racer'
Then run bundle install and commit.
To summarize the conclusion from my and OP's comments on the main post, the issue was not that minification isn't working, but that the minified assets weren't being used. This is because the assets at one point had been precompiled into public/assets and checked into Git; the public, unminified assets then took precedence over the minified assets when being served.
The solution, then, was to remove those artifacts from Git:
git rm -r public/assets
Checking precompiled assets into version control is generally discouraged, although it depends on your deployment system. With Heroku, there's usually no need. See Do you add public/assets in version control? for more details.
Related
//= require jquery
How is the jquery library being loaded in with this?
I do not have jquery files anywhere in the project to be loaded.
What magical place are they loaded from?
Same goes for //= require bootstrap-sprockets I put this line in so that bootstrap was loaded correctly.
I have the gem but what magic is done here?
those files got loaded because you have the gem 'jquery-rails' and the gem 'bootstrap-sass', '~> 3.3.6'
they hold the js, css, and images files in the assets directory inside there gem
what the Rails Asset Pipeline does is look at the assets and vendor directories to compile the files
I hope that this explanation works
you can see the assets for bootstrap-sass and jQuery here
Working on a project that started out with Bootstrap 2.3, using the bootstrap-sass gem, specifying version 2.3.1.0 in my gemfile. I'm wanting to update it to Bootstrap 3.
Here's what the app looks like with bootstrap-sass gem version 2.3.1.0:
I checked out a branch to experiment updating the styles to Bootstrap 3, so I updated my gemfile to use the latest version of the bootstrap-sass gem, ran bundle update and install.
I have bootstrap 3 version classes on each of the "Amazing Point" div elements you saw above, so the styles in the hero unit should vanish, the buttons should go flat, and the amazing points should span 4 columns with the "col-lg-4" class I've specified.
But when I launch the rails server, I get a mix of Bootstrap 2.3 and 3:
The "col-lg-4" classes applied to the Amazing Points, BUT the sign in and sign up buttons still look like Bootstrap 2.3 buttons! And there's a subtle, but visible change in the "Sign In" and "Sign Up" text - it's a tad bolder. It's like I've got some weird hybrid of Bootstrap 2.3 and 3 going on.
But now I run rake assets:precompile, and here's what I get:
Now things are displaying correctly.
But why do I always have to run rake assets:precompile to get it working correctly? And how could I make it where it would just update automatically when I switch between the gem files?
Here are the other relevant files:
application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require_tree .
*/
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'jquery-rails'
gem 'devise'
group :production do
gem 'pg'
end
group :development do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass', '3.0.2.0'
end
Gemfile.lock (I'll just show the bootstrap-sass version):
bootstrap-sass (3.0.2.0)
sass (~> 3.2)
application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
module Bloccit
class Application < Rails::Application
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
# Enable escaping HTML in JSON.
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
# Enable the asset pipeline
config.assets.enabled = true
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.initialize_on_precompile = false
end
end
relevant lines in config/development.rb:
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
config.assets.compile = true
config.serve_static_assets = false
Ok, so I believe I've figured some of this out, after checking out this blog post.
For some reason, if you're updating from the Bootstrap 2.3 bootstrap-sass gem version to the latest one, YOU MUST clean out your old bootstrap-sass gem.
So I ran gem list bootstrap-sass which gave me:
*** LOCAL GEMS ***
bootstrap-sass (3.0.2.0)
bootstrap-sass (2.3.1.0)
Run gem cleanup bootstrap-sass -d and you'll be given a preview of what will happen. Then run gem cleanup bootstrap-sass -v and it will uninstall all previous versions. Restart your rails server and it works.
Then if you were wanting to go back to the old bootstrap-sass version, you would need to update your gemfile, run bundle, and then run gem uninstall bootsrap-sass 3.0.2.0 or whichever later bootstrap-sass gem that you have.
This is kind of a pain, so if someone knows a better way of going about this, please share. I might see if the bootstrap-sass-rails gem offers a better experience.
I am in the process of upgrading an old app to the asset pipline but after following the ryan bates tutorial on upgrading to 3.1 I am still not able to take advantage of the pipline. In order to rule out my upgrade process I created a fresh rails app and attempted some coffee scripting and adding other files to the /assets/javascripts folder, however any additional files besides the application.js do not seem to be rendered.
This is my application.js file:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
alert("this displays fine");
And the additional dogs.js.coffee file:
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
alert "cant see this!"
It seems to be a sprockets issue but I really cant find anyone with the same problem, or info on when additional javascript files within the assets folder are not included in the application.js via the require_tree .
Here is my gem file:
gem 'rails', '3.1.1'
gem 'sqlite3'
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
group :test do
# Pretty printed test output
gem 'turn', :require => false
end
my ruby version is 2.0.0p195
thanks for any help!
G
It seems the ruby version was my problem, I downgraded to ruby 1.9.3, then reinstalled gems and it works now!
I've got an issue with assets pipeline in production mode. I ranbundle exec rake assets:precompilein development and it works fine. However when I ran it in production server(after deployment), the css and js files can not be loaded properly. When I access css or js files through url /assets/[file_name], I get 500 error. I thought it's a permission issue but all files under /public/assets can be accessible. Production.rb and development.rb files are all intact(from scaffolding). I can see all the files listing in the html though. Any hint would be much appreciated. Thanks
production.rb:
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = false
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
Gemfile(snapshot):
gem 'rails', '3.2.11'
gem 'pg'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer'
gem 'uglifier', '>= 1.0.3'
end
gem 'compass-rails'
# Deployment related
gem 'capistrano'
gem 'capistrano-ext'
gem 'jquery-rails', '~> 2.0.0'
gem 'jquery-datatables-rails'
group :development do
gem 'guard'
end
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require dataTables/jquery.dataTables
*= require bootstrap.scss
*= require bootstrap-responsive.scss
*= require_tree .
*/
I have another application.css.scss for sass related:
#import "compass";
#import "compass/utilities/tables";
.ftr-ticker {
background: #333;
height: 25px;
width: 100%;
}
....
You have modified a manifest file application.css and I think that gives a problems . My advice is to rename your scss file to other name , not application (might be custom.css.scss) and include it in the manifest application.css file like this:
*= require custom
As you can see , the names of stylesheet files are not prefixed . Your *= require bootstrap.scss should be *= require bootstrap . I suggest also to move require_tree after all others requires. This Railsguide is going to help you with asset-pipeline in Rails 3.2.
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.