Production Ready Staticmatic Projects With Jammit and YUI Compressor or Closure
Staticmatic is handy when it comes to static websites or JavaScript only applications (no backend). It generates HTML (from Haml) and CSS (from Sass/SCSS) wich could be served very fast on your webserver. To speed it up, CSS sprites can be generated by Lemonade, CSS files can be bundled by having only one Sass/SCSS file but JavaScript files keep as they are.
Jammit is one (of many) gems which handles asset packages for Ruby on Rails. Jammit packs JavaScript files either with the YUI Compressor or Google’s Closure Compiler (Jammit docs recommend using uncompressed versions of jQuery if you use Closure). With a bit of configuration it’s possible to use it with Staticmatic.
Switch to Bundler
Using bundler with staticmatic is pretty easy. Create your Gemfile
in the root path of your project:
source 'http://rubygems.org'
gem 'staticmatic'
, '~> 0.11.0.alpha.8'
gem 'jammit'
, '~> 0.5.3'
Run at the same place:
bundle
Activate bundler at the beginning of your config/site.rb
and activate Jammit:
require "bundler"
Bundler.setup
ROOT = File.dirname(__FILE__)
JAVASCRIPTS_PATH = File.join(ROOT, 'site'
, 'javascripts'
)
require "jammit"
Jammit.load_configuration(File.join(ROOT, 'config'
, 'assets.yml'
))
Jammit.packager.precache_all(JAVASCRIPTS_PATH, ROOT) if ARGV[0] == 'build'
Jammit Configuration
I assume your JavaScript files are placed in site/javascripts
(if not change line 5 in config/site.rb
, line 1 and lines 7 and following in config/assets.yml
). Create config/assets.yml
and add your JavaScript files:
package_path: javascripts
package_assets: on
javascript_compressor: yui
javascripts:
your_package:
- site/javascripts/vendor/jquery-1.4.2.min.js
- site/javascripts/vendor/jquery.ui.js
- site/javascripts/config/*.js
- site/javascripts/app/**/*.js
- site/javascripts/application.js
The second line determines if staticmatic currently builds or previews—it should compress the assets only in build mode. The YAML file is parsed with ERB by default.
Jammit Integration
Add a new helper (will be included by default) in src/helpers/jammit_helper.rb
(woohoo it’s so HTML5—without type="text/javascript"
):
module JammitHelper
def javascripts(*packages)
packages.map do |pack|
if Jammit.package_assets
url = current_page_relative_path + Jammit.asset_url(pack, :js)[1..-1]
%Q(<script src="\#{url}
"></script>\n)
else
Jammit.packager.individual_urls(pack.to_sym, :js).map do |file|
url = file.gsub(%r(^.*site/)
, current_page_relative_path)
%Q(<script src="\#{url}
"></script>\n)
end
end
end.join
end
alias include_javascripts javascripts
end
Now you can include your JavaScript files in your layout/default.haml
:
!!!
%html
%head
%title StaticMatic
= stylesheets
= javascripts :your_package # key as defined in config/assets.yml
%body
= yield
You could also use include_javascripts
if you prefer consistency to Rails applications.
CSS/Sass/SCSS Configuration
If you don’t have a Compass configuration, add the following line at the end of your config/site.rb
:
Compass.add_project_configuration('config/compass.rb'
)
In your config/compass.rb
add or change:
output_style = ARGV[0] == 'build'
? :compressed : :expanded
Comments will appear on your localhost, but on your production server, it will use the compressed version (after you run staticmatic build .
).
Conclusion
It’s easy to build super-fast static websites with Staticmatic (as this blog itself), but Staticmatic doesn’t help you with with your assets. There’s no problem to add them by yourself, but this should be integrated by default.