{% extends "../../layout.html" %} {% block sectionClasses %}plugins hasBreadCrumb plugins-spincast-css-yuicompressor{% endblock %} {% block meta_title %}Plugins - Spincast CSS YUI Compressor{% endblock %} {% block meta_description %}Spincast CSS YUI Compressor plugin - YUI Compressor integration to minify/compress your CSS.{% endblock %} {% block scripts %} {% endblock %} {% block body %}
  1. Plugins
  2. Spincast CSS YUI Compressor plugin

Spincast CSS YUI Compressor plugin

Spincast CSS YUI Compressor plugin

Overview

A small plugin that simply wraps YUI Compressor so you can compress CSS. It removes spaces, newlines, etc. This leads to faster load time for your webpages.

Note that this plugin only provides the CSS compression feature of YUI Compressor, not its ability to also compress Javascript. The reason is that YUI Compressor is not up to date in regard to Javascript... To optimize Javascript, use the Spincast JS Closure Compiler plugin!

Usage

You inject and use the SpincastCssYuiCompressorManager component to minify your CSS.

Let's say you have a dynamic resource route that serves your CSS files dynamically:

{% verbatim %} 

router.dir("/publicdyn/css/*{relativePath}")
      .pathRelative("/publicdyn/css")
      .handle(publicResourcesController::dynCss);
{% endverbatim %}

In the "dynCss(...)" handler, you would get the raw content of the CSS file and tweak it using the SpincastCssYuiCompressorManager component before sending the result:

{% verbatim %} 

File cssFile = //... get the CSS file

String rawCssContent = FileUtils.readFileToString(cssFile, "UTF-8");

String cssMinified = getSpincastCssYuiCompressorManager().minify(rawCssContent);

context.response().sendCharacters(cssMinified, "text/css");
{% endverbatim %}

Explanation :

  • 1 : We get the CSS file using the "relativePath" path parameter taken from the request. We make sure we validate this user input properly!
  • 3 : We get the raw CSS content.
  • 5 : We call the minify(...) method.
  • 7 : We send the minified CSS, using the proper content-type. Since this is a dynamic resource route, the result will be cached and it is this cached version that will be served on next requests!

SpincastCssYuiCompressorManager methods
The main methods provided by SpincastCssYuiCompressorManager are:
  • String minify(String cssContent)

    Run YUI Compressor on the specified CSS content, as a String. Return the compressed CSS.

  • void minify(File cssFile)

    Run YUI Compressor on the specified CSS file. The file will be modified and will contain the compressed CSS.

There is one extra option available on both methods: lineBreakPos. Here is the documentation about this option, taken directly from YUI Compressor documentation (search for "--line-break"):

"Some source control tools don't like files containing lines longer than, say 8000 characters. The linebreak option is used in that case to split long lines after a specific column. It can also be used to make the code more readable, easier to debug (especially with the MS Script Debugger) Specify 0 to get a line break after each semi-colon in JavaScript, and after each rule in CSS."

Configurations

This plugin has no global configuration.

Installation

1. Add this Maven artifact to your project: 

<dependency>
    <groupId>org.spincast</groupId>
    <artifactId>spincast-plugins-css-yuicompressor</artifactId>
    <version>{{spincast.spincastCurrrentVersion}}</version>
</dependency>

2. Add an instance of the SpincastCssYuiCompressorPlugin plugin to your Spincast Bootstrapper: {% verbatim %} 


Spincast.configure()
        .plugin(new SpincastCssYuiCompressorPlugin())
        // ...

{% endverbatim %}

{% endblock %}