11..index ::
22 single: Assetic; UglifyJs
33
4- How to MinifyJavaScripts with UglifyJs
5- =======================================
4+ How to MinifyCSS/JS Files (using UglifyJs and UglifyCss)
5+ =========================================================
66
77`UglifyJs `_ is a javascript parser/compressor/beautifier toolkit. It can be used
88to combine and minify javascript assets so they need less HTTP requests and makes
9- the website load faster.
9+ the website load faster. `UglifyCss `_ is a css compressor/beautifier much like
10+ `UglifyJs `.
11+
12+ In this cookbook, the installation, configuration and usage of `UglifyJs ` is shown
13+ in detail. `UglifyCss ` works pretty much the same way and is only talked about briefly.
1014
1115Install UglifyJs
1216----------------
@@ -123,13 +127,75 @@ your assets are a part of the view layer, this work is done in your templates:
123127With the addition of the ``uglifyjs `` filter to the asset tags above, you should
124128now see minified JavaScripts coming over the wire much faster.
125129
130+ Install, configure and use UglifyCss
131+ ------------------------------------
132+
133+ The usage of `UglifyCss ` works the same way as `UglifyJs `. First, make sure
134+ the node package is installed:
135+
136+ ..code-block ::bash
137+
138+ $ npm install -g uglifycss
139+
140+
141+
142+ ..configuration-block ::
143+
144+ ..code-block ::yaml
145+
146+ # app/config/config.yml
147+ assetic :
148+ filters :
149+ uglifycss :
150+ bin :/usr/local/bin/uglifycss
151+
152+ code-block ::xml
153+
154+ <!-- app/config/config.xml-->
155+ <assetic : config >
156+ <assetic : filter
157+ name =" uglifycss"
158+ bin =" /usr/local/bin/uglifycss"
159+ </assetic : config >
160+
161+ code-block ::php
162+
163+ // app/config/config.php
164+ $container->loadFromExtension('assetic', array(
165+ 'filters' => array(
166+ 'uglifycss' => array(
167+ 'bin' => '/usr/local/bin/uglifycss',
168+ ),
169+ ),
170+ ));
171+
172+
173+ your template:
174+
175+ ..configuration-block ::
176+
177+ ..code-block ::html+jinja
178+
179+ {% javascripts '@AcmeFooBundle/Resources/public/css/*' filter='uglifycss' %}
180+ <link rel="stylesheet" href="{{ asset_url }}" />
181+ {% endjavascripts %}
182+
183+ ..code-block ::html+php
184+
185+ <?php foreach ($view['assetic']->javascripts(
186+ array('@AcmeFooBundle/Resources/public/css/*'),
187+ array('uglifycss')
188+ ) as $url): ?>
189+ <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
190+ <?php endforeach; ?>
191+
126192Disable Minification in Debug Mode
127193----------------------------------
128194
129195Minified JavaScripts are very difficult to read, let alone
130- debug. Because of this,Assetic lets you disable a certain filter when your
196+ debug. Because of this,Assetics lets you disable a certain filter when your
131197application is in debug mode. You can do this by prefixing the filter name
132- in your template with a question mark: ``? ``. This tellsAssetic to only
198+ in your template with a question mark: ``? ``. This tellsAssetics to only
133199apply this filter when debug mode is off.
134200
135201..configuration-block ::
@@ -149,7 +215,6 @@ apply this filter when debug mode is off.
149215 <script src="<?php echo $view->escape($url) ?>"></script>
150216 <?php endforeach; ?>
151217
152-
153218..tip ::
154219
155220 Instead of adding the filter to the asset tags, you can also globally
@@ -161,4 +226,5 @@ apply this filter when debug mode is off.
161226
162227
163228.. _`UglifyJs` :https://github.com/mishoo/UglifyJS
229+ .. _`UglifyCss` :https://github.com/fmarcia/UglifyCSS
164230.. _`install node.js` :http://nodejs.org/