|
| 1 | +How to Minify Javascripts and Stylesheets with YUI Compressor |
| 2 | +============================================================= |
| 3 | + |
| 4 | +Yahoo! provides an excellent utility for minifying Javascripts and stylesheets |
| 5 | +so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic, |
| 6 | +you can take advantage of this tool very easily. |
| 7 | + |
| 8 | +Download the YUI Compressor JAR |
| 9 | +------------------------------- |
| 10 | + |
| 11 | +The YUI Compressor is written in Java and distributed as a JAR. Download the |
| 12 | +JAR from the Yahoo! site and save it to |
| 13 | +``app/Resources/java/yuicompressor.jar``. |
| 14 | + |
| 15 | +Configure the YUI filters |
| 16 | +------------------------- |
| 17 | + |
| 18 | +Now you need to configure two Assetic filters in your application, one for |
| 19 | +minifying Javascripts with the YUI Compressor and one for minifying |
| 20 | +stylesheets: |
| 21 | + |
| 22 | +.. configuration-block:: |
| 23 | + |
| 24 | + .. code-block:: yaml |
| 25 | +
|
| 26 | + # app/config/config.yml |
| 27 | + assetic: |
| 28 | + filters: |
| 29 | + yui_css: |
| 30 | + jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar" |
| 31 | + yui_js: |
| 32 | + jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar" |
| 33 | +
|
| 34 | + .. code-block:: xml |
| 35 | +
|
| 36 | + <!-- app/config/config.xml --> |
| 37 | + <assetic:config> |
| 38 | + <assetic:filter |
| 39 | + name="yui_css" |
| 40 | + jar="%kernel.root_dir%/Resources/java/yuicompressor.jar" /> |
| 41 | + <assetic:filter |
| 42 | + name="yui_js" |
| 43 | + jar="%kernel.root_dir%/Resources/java/yuicompressor.jar" /> |
| 44 | + </assetic:config> |
| 45 | +
|
| 46 | + .. code-block:: php |
| 47 | +
|
| 48 | + // app/config/config.php |
| 49 | + $container->loadFromExtension('assetic', array( |
| 50 | + 'filters' => array( |
| 51 | + 'yui_css' => array( |
| 52 | + 'jar' => '%kernel.root_dir%/Resources/java/yuicompressor.jar', |
| 53 | + ), |
| 54 | + 'yui_js' => array( |
| 55 | + 'jar' => '%kernel.root_dir%/Resources/java/yuicompressor.jar', |
| 56 | + ), |
| 57 | + ), |
| 58 | + )); |
| 59 | +
|
| 60 | +You now have access to two new Assetic filters in your application: |
| 61 | +``yui_css`` and ``yui_js``. These will use the YUI Compressor to minify |
| 62 | +stylesheets and Javascripts, respectively. |
| 63 | + |
| 64 | +Minify your Assets |
| 65 | +------------------ |
| 66 | + |
| 67 | +You have YUI Compressor configured now, but nothing is going to happen until |
| 68 | +you apply one of these filters to an asset. Since your assets are a part of |
| 69 | +the view layer, this work is done in your templates: |
| 70 | + |
| 71 | +.. configuration-block:: |
| 72 | + |
| 73 | + .. code-block:: html+jinja |
| 74 | + |
| 75 | + {% javascripts 'js/src/*' filter='yui_js' %} |
| 76 | + <script src="{{ asset_url }}"></script> |
| 77 | + {% endjavascripts %} |
| 78 | +
|
| 79 | + .. code-block:: html+php |
| 80 | + |
| 81 | + <?php foreach ($view['assetic']->javascripts( |
| 82 | + array('js/src/*'), |
| 83 | + array('yui_js')) as $url): ?> |
| 84 | + <script src="<?php echo $view->escape($url) ?>"></script> |
| 85 | + <?php endforeach; ?> |
| 86 | +
|
| 87 | +With the addition of the ``yui_js`` filter to the asset tags above, you should |
| 88 | +now see minified Javascripts coming over the wire much faster. |
| 89 | + |
| 90 | +Disable Minification in Debug Mode |
| 91 | +---------------------------------- |
| 92 | + |
| 93 | +Minified Javascript is very difficult to read, let alone debug. Because of |
| 94 | +this, Assetic lets you disable a certain filter when your application is in |
| 95 | +debug mode. You can do this be prefixing the filter name in your template with |
| 96 | +a question mark: ``?``. This tells Assetic to only apply this filter when |
| 97 | +debug mode is off. |
| 98 | + |
| 99 | +.. configuration-block:: |
| 100 | + |
| 101 | + .. code-block:: html+jinja |
| 102 | + |
| 103 | + {% javascripts 'js/src/*' filter='?yui_js' %} |
| 104 | + <script src="{{ asset_url }}"></script> |
| 105 | + {% endjavascripts %} |
| 106 | +
|
| 107 | + .. code-block:: html+php |
| 108 | + |
| 109 | + <?php foreach ($view['assetic']->javascripts( |
| 110 | + array('js/src/*'), |
| 111 | + array('?yui_js')) as $url): ?> |
| 112 | + <script src="<?php echo $view->escape($url) ?>"></script> |
| 113 | + <?php endforeach; ?> |
| 114 | +
|
| 115 | +.. _YUI Compressor: http://developer.yahoo.com/yui/compressor/ |
0 commit comments