# Octopress Asset Pipeline

Combine and compress and fingerprint Stylesheets (CSS and Sass) and Javascripts (JS and Coffeescript) to a single fingerprinted .css or .js file.

**How it works:** This plugin will automatically search Jekyll's site index for .js, .coffee, .css, .scss and .sass
files and combine, compress and fingerprint them so they're ready for deployment. Then add the liquid tags to your site layout to write
the necessary script or link tags.

## Installation

### Using Bundler

Add this gem to your site's Gemfile in the `:jekyll_plugins` group:

    group :jekyll_plugins do
      gem 'octopress-asset-pipeline'
    end

Then install the gem with Bundler

    $ bundle

### Manual Installation

    $ gem install octopress-asset-pipeline

Then add the gem to your Jekyll configuration.

    gems:
      -octopress-asset-pipeline

## Liquid tags

Include these tags in your site's layout.

```
{% css_asset_tag %}
{% js_asset_tag %}
```

When Jekyll is compiled these will be replaced with something like this.

```
<link href='/stylesheets/all-b5c56f2652600cde201589531c453ba1.css' media='all' rel='stylesheet' type='text/css'>
<script src='/javascripts/all-75489c7b2da6efce7ee1bc45795d400b.js'></script>
```

## Configuration

This plugin integrates with the core asset pipeline system in Octopress Ink, therefore
the configurations are set in the `_config.yml` configuration file under the `asset_pipeline` key.

| Option               | Description                               | Default     |
|:---------------------|:------------------------------------------|:------------|
| `combine_css`        | Combine all .css, .scss and .sass files   | true        |
| `combine_js`         | Combine all .js and .coffee files         | true        |
| `compress_css`       | Compress stylesheets for production       | true        |
| `compress_js`        | Compress Javascripts for production       | true        |
| `order_js`           | Order for .js and .coffee files           | []          |
| `order_css`          | Order for .css, .scss, and .sass          | []          |
| `uglifier`           | Settings for Javascript Uglifier. [Documentaion](https://github.com/lautis/uglifier).  | {}          |

### Ordering assets

By default when scripts and stylesheets are combined, they added based on
their order in the file system. You can manually specify order like this:

```
asset_pipeline:
  order_js:
   - jquery.js
   - kittens.coffee

  order_css:
   - normalize.css
   - site.sass
```
Assets will ordered as specified. Any additional assets will be appended based on their order in the file system.

Note: It is not necessary to write full paths in these configurations. An asset at `javascripts/lib/jquery.js` will match `jquery.js` and be ordered accordingly.

## Media files

Usually it's better to define print styles inside of the main CSS file beneath a print media query, like this.

```
@media print {
  * { background: none }
  * { color: #000 }
  ...
}
```

If you want to specify a separate print stylesheet, include `@print` in your filename, before the extension. 

When your site is compiled, this file will be written separately and its `<link>` tag will include a `media='print'` attribute.

## Contributing

1. Fork it ( https://github.com/octopress/asset-pipeline/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request