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.