Ruby on Rails: Minify or Compress Javascript Files? - javascript

Currently there is this in my <head>
<%= javascript_include_tag 'jquery-1.6.3.min', 'jquery.form', 'jquery.validate', 'script', :concat => true %>
This means Rails produces an all.js File with all js-files combined in it.
Is there some way in Rails to also minify or compress the js files? I mean like getting rid of comments, whitespace, whatever a js compressor typically does. I'm just curious because with an automated compression like this I wouldn't have to manually compress the js files each time I change something.
Any ideas on that?

You could do that using sprockets (by default in Rails 3.1+) or jammit

Related

Rails production asset compress and integration

Fast Example,
lets say, i have this js file, test.coffee
alert 'test!'
my goal is,
I dont want this code to be loaded in every pages
so i manually included where i want,
<%= javascript_include_tag 'test'%>
but the tragedy happens in production mode,
this test.coffee is not minified in production mode!
I want this code to be minified, but it should not integrate and minified to application.js, because i don't want this code be loaded in every pages.
How can i solve this dilemma?
You are having this issue because rails by default doesn't precompile file with the coffee extension. You should be able to solve this issue be prepending the .js extension so your file should look like this:
test.js.coffee
Straight from the rails docs:
When using asset precompilation, you will need to ensure that your controller assets will be precompiled when loading them on a per page basis. By default .coffee and .scss files will not be precompiled on their own. See Precompiling Assets for more information on how precompiling works.
Note:
There's a mechanism in rails that allows you to "inject" javascript at runtime.
Typically you would define a yield :javascripts in your app layout.
And add content to this yield using:
<% content_for :javascripts do %>
<%= script_tag :test %> # Content here will be yielded
<% end %>
This allows you to define your javascript at the bottom page while injecting page specific assets.

Add timestamps to compiled javascript

I'm using (Ruby-based) Middleman as a front-end site compiler and I want to get build timestamps in my SCSS and JS. I found this solution to add timestamps to SCSS: Add timestamps to compiled sass/scss
Is there an equivalent for JavaScript compiled using Sprockets?
Yes.
Sprockets provides an ERB engine for preprocessing assets using embedded Ruby code. Append .erb to a CSS or JavaScript asset's filename to enable the ERB engine.
Sprockets processes multiple engine extensions in order from right to left, so you can use multiple engines with a single asset. For example, to have a CoffeeScript asset that is first preprocessed with ERB, use the extension .js.coffee.erb
(The above is from the Sprockets README)
For example, if you have a file hello.js.coffee.erb then you can put this in it:
<%= Time.now.utc.to_s %>

Rails: Include External JavaScript

I want to use a JavaScript library such as a jQuery plugin. Do I use the Rails asset pipeline? Or should I include it with a javascript_include_tag? What are my options and what is the recommended practice?
Will you use the JavaScript library on only a few pages or throughout the application? If you will use it throughout the application, use the asset pipeline by adding it to the vendor/assets/javascripts folder. If you plan to use the library on a single page, use the javascript_include_tag.
Here are rules of thumb to guide your use of JavaScript in Rails:
Logically organize your site-wide scripts in the app/assets/javascripts/ folder.
Copy external JavaScript libraries (such as jQuery plugins) to the vendor/assets/javascripts folder.
List site-wide scripts in the app/assets/javascripts/application.js manifest.
Let the Rails asset pipeline combine them all in one minimized application.js file.
For scripts that are used on a few pages that have few visits, load as page-specific JavaScript.
Put page-specific JavaScript in the lib/assets/javascripts folder.
For page-specific JavaScript, use <%= yield(:head) %> in the application layout and <% content_for :head ... %> in the view.
For a full explanation with all the details, see my article:
Including External JavaScript Files in Rails
To access Javascript on a single file, javascript_include_tag is the best option.
With that what you can do is too add 'Rails.application.config.assets.precompile += %w( yourfilename.js )' to your 'config/initializers/assets.rb' file.
In Haml
= javascript_include_tag "example"
To load the file assets/javascripts/example.js

rails 3 issues with adding jquery javascript files or any other files to application.html.erb?

This will sound like a stupid question for most but I'm really having problems with adding JavaScript files (such as jquery) to my application.html.erb, if I have the jquery first then the rails JavaScript doesn't work correctly. what's the best way to include all JavaScript files to the application.html.erb from my JavaScript folder?
Edit: how can I have Jquery and Prototype run side by said in my rails 3 application? what should my application.html.erb code look like?
If you want to use jQuery and Prototype side-by-side, you should order your javascript include statements as follows:
<%= javascript_include_tag :defaults, "jquery.min", "jquery-ui.min" %>
<script type="text/javascript">
jQuery.noConflict();
</script>
Note: After doing this, you will not be able to access any jQuery methods using $(...). Instead, you'll need to use jQuery(...)
However, if you don't need Prototype, delete your prototype.js file and install the proper jQuery-specific rails.js file (the one that Rails uses by default is Prototype-specific). See https://github.com/rails/jquery-ujs for instructions.
Create new project skip prototype with -J:
rails new -J test -d mysql
Modify the Gemfile, add JQuery:
gem 'jquery-rails'
Bundle update:
bundle update rails
Generator the JQuery, --ui means withe JQuery UI:
rails generate jquery:install --ui
Modify the config/application.rb:
config.action_view.javascript_expansions[:defaults] = %w(jquery jquery-ui rails application)

Load order with javascript_include_tag :all

So I've recently started to include quite a few .js files in to my web application and some of them depend on each other so load order is important.
However rails caching just seems to load a all.js file with no particular order to the files.
What's a good way to solve this issue?
You can do as follows
First, load the default JavaScript files.
Then load other scripts in the order that you want
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "script_1", "script_2", "script_3" %>
The load order depends on your Javascript manifest file. In Rails 3.1 you can go to
app/assets/javascripts/application.js
At the bottom of the file you will see directives for rails how what / how to include files into the Rake pipeline. In the below example, I included a new directive that will include all the files in the directory called "Templates". I also made sure that the Handlebars.js templating file is called before all of the files in the "Templates" directory, otherwise the browser would throw an exception
//= require handlebars
//= require_tree ../templates
//= require_tree .
Hope it helps!
I've been experimenting with the YUILoader Module, it seems pretty nifty, though I am currently frussing about loading up custom modules. It's totally doable, I just couldn't figure it out in 5 mins.
http://developer.yahoo.com/yui/yuiloader/ (YUI2.8.1)
http://developer.yahoo.com/yui/examples/yuiloader/index.html

Categories

Resources