Pre Compiling - GreenImp/bill-bootstrap GitHub Wiki

Pre-Compiling CSS and JS

When CSS/JS is ready for release, it needs to first be merged and minified (compressed).

Setting up

Both of the compressors that we use require Ruby. If you've not got Ruby installed, I suggest looking up how to install it, on your OS.

If you're using a Mac, I suggest reading this article, as it will save you many, many headaches (personal experience!): http://net.tutsplus.com/tutorials/ruby/how-to-install-ruby-on-a-mac/

CSS

Before deployment to the distribution directory, it must be compiled.

This can be done extremely easily, via the command line:

Install SASS (if not already installed): $ gem install sass
Go to the Bill repository
```
 $ cd {path_to_bill}
```

Merge & Compress bill:

 $ sass src/assets/scss/bill.scss dist/assets/css/bill.min.css --style compressed

If you only want to merge the CSS, without compressing (for debugging), use this command instead:

 $ sass src/assets/scss/bill.scss dist/assets/css/bill.min.css --style expanded

Merge & Compress bill UI:

 $ sass src/assets/scss/bill-ui.scss dist/assets/css/bill-ui.min.css --style compressed

If you only want to merge the CSS, without compressing (for debugging), use this command instead:

 $ sass src/assets/scss/bill-ui.scss dist/assets/css/bill-ui.min.css --style expanded

Ah! Not the command line!

If you're not comfortable with the command line, there are many GUIs available that can automatically compile SASS for you. I've listed a couple below:

Scout is pretty good (for Mac & Windows).
PHPStorm is a full development IDE, which has automatic SASS compilation (for Mac, Linux & Windows).

JS

Although the JS is perfectly valid as separate files, for distribution, we want to compile it all into a single file, for ease of use and less http requests.

For this, we're using Juicer, a CSS and JS minifier: https://github.com/cjohansen/juicer

First, ensure that you have Java installed (required for the compression software).

Combining the files is as easy as:

Install Juicer and the YUI compressor (if not already installed):
```
 $ gem install juicer
 $ juicer install yui_compressor
```
Go to the Bill repository
```
 $ cd {path_to_bill}
```

Merge & Compress the JS

 $ juicer merge -sf src/assets/js/bill.js -o dist/assets/js/bill.min.js

If you only want to merge the JS, without compressing (for debugging), use this command instead:

 $ juicer merge -sf src/assets/js/bill.js -o dist/assets/js/bill.js --minifyer ""