Giới thiệu sơ lược về gem Jammit Ruby on Rails

Jammit là một thư viện mạnh mẽ cho Rails, cung cấp liên kết giữa CSS và JavaScript, nhỏ gọn như bạn mong đợi: ahead-of-time gzipping, built-in JavaScript template support và optional Data-URI / MHTML image embedding.

Cài đặt

gem install jammit

Thêm gem Jammit vào trong file environment.rb để khởi tạo:

config.gem "jammit"

Nếu bạn sử dụng Rails 2, bạn cần chỉnh sửa file config/routes.rb để cung cấp routes cho Jammit:

ActionController::Routing::Routes.draw do |map|
  ...
  Jammit::Routes.draw(map)
  ...
end

Cấu hình gem Jammit

Jammit sử dụng YAML file config/assets.yml để đinh nghĩa các packages và thiết lập thêm các tùy chọn. Một ví dụ của file assets.yml hoàn chỉnh:

embed_assets: on

javascripts:
  workspace:
    - public/javascripts/vendor/jquery.js
    - public/javascripts/lib/*.js
    - public/javascripts/views/**/*.js
    - app/views/workspace/*.jst

stylesheets:
  common:
    - public/stylesheets/reset.css
    - public/stylesheets/widgets/*.css
  workspace:
    - public/stylesheets/pages/workspace.css
  empty:
    - public/stylesheets/pages/empty.css

Có rất nhiều options bạn có thể thêm vào file assets.yml để custom Jammit. Dưới đây là một file config sử dụng tất cả những options có thể:

package_assets	                on | off | always
embed_assets	                on | off | datauri
compress_assets	                on | off
rewrite_relative_paths	        on | off
gzip_assets	                    on | off
javascript_compressor	        yui | closure | uglifier
allow_debugging	                on | off
template_function	            on | off | ...
template_namespace	            ...
template_extension	            ...
package_path	                ...
compressor_options	            ...
css_compressor_options	        ...

Sử dụng gem Jammit

Để truy cập Jammit trong views, chúng ta sẽ sử dụng helper tương ứng. Method trong helper có thể include nhiều packages một lần:

<%= include_stylesheets :common, :workspace, :media => 'all' %>
<%= include_javascripts :workspace %>

Bạn có thể dễ dàng sử dụng Jammit với Rakefile:

require 'jammit'
Jammit.package!

YUI, Closure & UglifyJS

Jammit có thể cấu hình để sử dụng YUI Compressor, Google Closure Compiler, hoặc UglifyJS để nén và tối ưu JavaScript (CSS luôn chạy thông qua YUI Compressor). Thiết lập biến javascript_compressor để lựa chọn yui, closure, hay uglifier. Nếu để trống, Jammit sẽ mặc định đó là yui.

Bạn có thể điều chỉnh trình biên dịch của JavaScript bằng cách thêm compressor_options vào file assets.yml. Biến compressor_options sẽ pass trực tiếp qua compressor mà bạn lựa chọn. Ví dụ, thiết lập Closure Compiler để dùng advanced optimizations, bạn cần thêm compilation_level:

javascript_compressor: closure
compressor_options:
  compilation_level: "ADVANCED_OPTIMIZATIONS"

Jammit luôn sử dụng YUI CSS Compressor để nén CSS file.

Expires Headers

Để thời gian load của page là ít nhất, chúng ta nên đặt HTTP Expires header ở một thời điểm trong tương lai xa. Bạn không cần lo lắng về việc xóa cache khi deploy phiên bản mới.

Nếu bạn đang sử dụng Nginx webserver, add đoạn code nhỏ sau vào block server { ... } trong ứng dụng của bạn:

location ~ ^/assets/ {
  passenger_enabled on;
  expires max;
}

Nếu bạn đang sử dụng Apache, hãy chắc rằng mode_expires đang enabled, sau đó thêm đoạn code nhỏ sau vào đoạn VirtualHost trong file config:

ExpiresActive On
<Directory "/path/to/public/assets">
  ExpiresDefault "access plus 1 year"
</Directory>

Tổng kết

Hy vọng qua bài viết này, mọi người có thể phần nào nắm được về gem Jammit của Rails. Bài viết được dịch từ Jammit Document