AssetHat

Load CSS & JS faster. Your assets are covered.

How do I use it?

AssetHat lets you keep your layouts lightweight, and move all the repetitive stuff to a config file.

Before


      # app/views/layouts/application.html.erb:
      <%= stylesheet_link_tag 'reset', 'application', :cache => 'application' %>
      <%= javascript_include_tag Rails.env.production? ?
            'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
            'jquery-1.6.0' %>
      <%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
      <%= javascript_include_tag 'application' %>

      # app/views/layouts/admin.html.erb:
      <%= stylesheet_link_tag 'reset', 'admin', :cache => 'admin' %>
      <%= javascript_include_tag Rails.env.production? ?
            'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
            'jquery-1.6.0' %>
      <%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
      <%= javascript_include_tag 'admin' %>
    

After


      # app/views/layouts/application.html.erb:
      <%= include_css :bundle => 'application' %>
      <%= include_js  :jquery, :bundles => ['plugins', 'application'] %>

      # app/views/layouts/admin.html.erb:
      <%= include_css :bundle => 'admin' %>
      <%= include_js  :jquery, :bundles => ['plugins', 'admin'] %>

      # config/assets.yml:
      # Use a config file to keep your layouts lightweight:
      css:
        bundles:
          application: ['reset', 'application']
          admin:       ['reset', 'admin']
      js:
        vendors:
          jquery:
            version: 1.6.0
        bundles:
          plugins:     ['plugin1', 'plugin2']
          application: ['application']
          admin:       ['admin']
       
    

Quick install

AssetHat is super-easy to set up for Rails 3 (or Rails 2.3 with Bundler):

Installation


      # Add to your Gemfile:
      gem 'asset_hat', '0.x.x'

      # Command-line:
      bundle install

      # Add to your Rakefile
      # (Rails 2.3.x only):
      require 'asset_hat/tasks'
      

Configuration


      # Generate config/assets.yml:
      rake asset_hat:config

      # Set your CSS and JS bundles:
      vim config/assets.yml

      # Minify / bundle CSS and JS,
      # and change CSS image URLs
      # to bust caches / use CDNs:
      rake asset_hat:minify
      

Some tips:

  • You’ll most likely want to update your deploy script to run rake asset_hat:minify. If you deploy with Capistrano, AssetHat has an example Capistrano hook.
  • If you made a CSS bundle called application, then rake asset_hat:minify creates a bundle at public/stylesheets/bundles/application.min.css. Likewise, if you have a JS bundle called plugins, then rake asset_hat:minify creates public/javascripts/bundles/plugins.min.js.
  • Already have an enormous app? You can convert gradually, using AssetHat’s include_css and include_js alongside Rails’ stylesheet_link_tag and javascript_include_tag. If you have plenty of JS files, you can load them in parallel just by enabling LABjs mode:

    <%= include_js 'file1', 'file2', 'file3', :loader => :lab_js %>
    # Loads JS files with LABjs from cdnjs, and uses the version you set in config/assets.yml

More info

Get the source code on GitHub: mintdigital/asset_hat

Fork me on GitHub