Minify is a rails gem to allow for easy handling of js/css minification and caching. I wrote it with the following limitations in mind:
- It must not rely on generating files on production.
- Heroku uses a read only file system (as well as other cloud providers).
- Don't want to cause any delays on first hit (like the built in Rails mechanisms).
- Don't want to install any extra programs on production servers.
- I love the idea of a config/assets.yml that stores a list of all js and css files used. This comes from the Jammit library which provided lots of inspiration.
- I want to use the YUI compressor for now (this can be abstracted later).
- I want to include rake and cap tasks for inclusion in deploy scripts.
- I want to have no extra steps at all when working in the dev environment.
- I use Slim for my templating and
Less for css work.
- Development should use the client side less.js
- Production should rely on pre-deployment creation of compiled, compressed and compacted code.
Just like Jammit you need to create an assets.yml file. For now this file only taks your list of javascript and stylesheet files. You can not glob here. You have to list all of the files. Here is an example file:
stylesheets:
robotpuffin:
- reset.css
- robotpuffin.less
javascripts:
robotpuffin:
- jquery.js
- rails.js
In this example (for a small simple site) I have two css files. One is Eric
Meyer's reset.css and the other is
a less css file for my robotpuffin site. I then have two javascript files,
jquery.js and the rails.js jquery adapter. I put both css and js files into a
group named robotpuffin
. All of these files are listed relative to
public/stylesheets
and public/javascripts
.
Minify puts it's final collected files into public/stylesheets/minify
and
public/javascripts/minify
. When you use less files they get compiled as css
files into public/stylesheets/minify/lessc
. After YUI compression files get
places into public/stylesheets/minify/yui
and public/javascripts/minify/yui
.
In the above example, after running the rake tasks we would have the following files:
public/
stylesheets/
|- reset.css - Original raw reset.css
|- robotpuffin.less - Original raw robotpuffin.less
minify/
|- robotpuffin.css - Group file containing both reset.css and robotpuffin.less
lessc/
|- robotpuffin.css - Compiled robotpuffin.less
yui/
|- reset.css - YUI Compressed reset.css
|- robotpuffin.css - YUI Compressed robotpuffin.css
javascripts/
|- jquery.js - Original raw jquery.js
|- rails.js - Original raw rails.js
minify/
|- robotpuffin.js - Group file containing both jquery.js and rails.js
yui/
|- jquery.js - YUI Compressed jquery.js
|- rails.js - YUI Compressed rails.js
If you want to keep the intermediate files out of git just add this to
.gitignore
:
public/stylesheets/minify/lessc
public/stylesheets/minify/yui
public/javascripts/minify/yui
You can add these lines to .gitignore by running:
rake minify:gitignore
To have minify compile, compress and collect your assets just run:
rake minify:build
To remove all of these files just run:
rake minify:clean
To include these files in your rails layouts you can use the following two helpers:
minify_stylesheets :robotpuffin
minify_javascripts :robotpuffin
If you do want to include both css and javascript with the same group names you can just use the simple version:
minify :robotpuffin
In production all these do is link to the group files
Minify does not require these gems in case you don't want them to exist on the server. It will use what it can and ignore the rest. For example, if you don't have the command line version of lessc installed or the javascript less file, it just won't use these features.
In order to make Minify use YUI to compress both js and css files just include the gem in your development group. This will make sure that it exists for your rake tasks but will not be installed on the server (where it isn't needed).
In your Gemfile add:
gem 'yui-compressor', :group => :development
or
group :development do
gem 'yui-compressor'
end
In order to use less in development modes you need the less.js file available.
Head over to the lesscss website to download less.js
and place it in public/javascripts/less.js
. As long as this file exists
Minify will directly link to less files and include this javascript file
automatically when in development mode.
In order to use less files in production and testing you need to compile the less files to their css counterparts. In order to do this you need access to the lessc binary.
I use Homebrew on my mac to install opensource software. You can install the following things without homebrew of course but I would highly recommend looking into this method.
-
Install node.js
brew install node
-
Install npm
curl http://npmjs.org/install.sh | sh
-
Install less
npm install less
The biggest problem so far is that this method requires a new commit on production releases. I'm still trying to think of ways around this but honestly I'm not going to worry about it for now since it's a nessecary evil for managing some of the other features.
Copyright (c) 2011 Christopher Giroir. See LICENSE.txt for further details.