Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 28f4ae7

Browse filesBrowse files
weaverryanweaverryan
committed
[symfony#2406] Proofreading new UglifyJs entry by @Sgoettschkes
* Updating some language * Adding additional clarification details * Updating to use UglifyJS version 2, since this is merged into Symfony 2.2, which uses an AsseticBundle that supports this Uglify version
1 parent 07b3d2f commit 28f4ae7
Copy full SHA for 28f4ae7

File tree

Expand file treeCollapse file tree

6 files changed

+109
-75
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+109
-75
lines changed

‎book/page_creation.rst

Copy file name to clipboardExpand all lines: book/page_creation.rst
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,8 @@ application should greet you:
245245
246246
http://localhost/app_dev.php/hello/Ryan
247247
248+
.. _book-page-creation-prod-cache-clear:
249+
248250
.. tip::
249251

250252
You can also view your app in the "prod" :ref:`environment<environments-summary>`

‎cookbook/assetic/asset_management.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/asset_management.rst
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,8 @@ by Symfony (as the asset files are in the ``dev`` environment). This is on
359359
purpose - letting Symfony generate these files dynamically in a production
360360
environment is just too slow.
361361

362+
.. _cookbook-asetic-dump-prod:
363+
362364
Instead, each time you use your app in the ``prod`` environment (and therefore,
363365
each time you deploy), you should run the following task:
364366

‎cookbook/assetic/index.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/index.rst
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Assetic
55
:maxdepth: 2
66

77
asset_management
8-
yuicompressor
98
uglifyjs
9+
yuicompressor
1010
jpeg_optimize
1111
apply_to_option

‎cookbook/assetic/uglifyjs.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/uglifyjs.rst
+97-73Lines changed: 97 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,60 @@ How to Minify CSS/JS Files (using UglifyJs and UglifyCss)
55
=========================================================
66

77
`UglifyJs`_ is a javascript parser/compressor/beautifier toolkit. It can be used
8-
to combine and minify javascript assets so they need less HTTP requests and makes
9-
the website load faster. `UglifyCss`_ is a css compressor/beautifier much like
10-
`UglifyJs`.
8+
to combine and minify javascript assets so that they require less HTTP requests
9+
and make your site load faster. `UglifyCss`_ is a css compressor/beautifier
10+
that is very similar to UglifyJs.
1111

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.
12+
In this cookbook, the installation, configuration and usage of UglifyJs is
13+
shown in detail. ``UglifyCss`` works pretty much the same way and is only
14+
talked about briefly.
1415

1516
Install UglifyJs
1617
----------------
1718

18-
UglifyJs is build as an node.js npm module and can be installed using npm. First,
19-
you need to `install node.js`_. Afterwards you can install UglifyJs using npm:
19+
UglifyJs is available as an `Node.js`_ npm module and can be installed using
20+
npm. First, you need to `install node.js`_. Afterwards you can install UglifyJs
21+
using npm:
2022

2123
.. code-block:: bash
2224
23-
$ npm install -g uglify-js@1
24-
25+
$ npm install -g uglify-js
26+
27+
This command will install UglifyJs globally and you may need to run it as
28+
a root user.
29+
2530
.. note::
2631

27-
It's also possible to install UglifyJs for your symfony project only. To do this,
28-
install it without the ``-g`` option and specify the path where to put the module:
29-
32+
It's also possible to install UglifyJs inside your project only. To do
33+
this, install it without the ``-g`` option and specify the path where
34+
to put the module:
35+
3036
.. code-block:: bash
31-
32-
$ npm install uglify-js@1 /path/to/symfony/app/Resources
33-
37+
38+
$ cd /path/to/symfony
39+
$ mkdir app/Resources/node_modules
40+
$ npm install uglify-js --prefix app/Resources
41+
3442
It is recommended that you install UglifyJs in your ``app/Resources`` folder
35-
and add the ``node_modules`` folder to version control.
36-
37-
.. tip::
38-
39-
This cookbook uses UglifyJs 1 instead of the newer version 2 to be compatible
40-
with old assetic versions. If you want to use UglifyJs version 2, make sure
41-
to also use the assetic filter for this version and apply the correct configuration.
43+
and add the ``node_modules`` folder to version control. Alternatively,
44+
you can create an npm `package.json`_ file and specify your dependencies
45+
there.
46+
47+
Depending on your installation method, you should either be able to execute
48+
the ``uglifyjs`` executable globally, or execute the physical file that lives
49+
in the ``node_modules`` directory:
50+
51+
.. code-block:: bash
52+
53+
$ uglifyjs --help
4254
43-
Configure the UglifyJs Filter
44-
-----------------------------
55+
$ ./app/Resources/node_modules/.bin/uglifyjs --help
4556
46-
Now we need to configure symfony2 to use the UglifyJs Filter when processing your
47-
stylesheets:
57+
Configure the uglifyjs2 Filter
58+
------------------------------
59+
60+
Now we need to configure Symfony2 to use the ``uglifyjs2`` filter when processing
61+
your javascripts:
4862

4963
.. configuration-block::
5064

@@ -53,15 +67,16 @@ stylesheets:
5367
# app/config/config.yml
5468
assetic:
5569
filters:
56-
uglifyjs:
70+
uglifyjs2:
71+
# the path to the uglifyjs executable
5772
bin: /usr/local/bin/uglifyjs
5873
5974
.. code-block:: xml
6075
6176
<!-- app/config/config.xml -->
6277
<assetic:config>
6378
<assetic:filter
64-
name="uglifyjs"
79+
name="uglifyjs2"
6580
bin="/usr/local/bin/uglifyjs" />
6681
</assetic:config>
6782
@@ -70,7 +85,7 @@ stylesheets:
7085
// app/config/config.php
7186
$container->loadFromExtension('assetic', array(
7287
'filters' => array(
73-
'uglifyjs' => array(
88+
'uglifyjs2' => array(
7489
'bin' => '/usr/local/bin/uglifyjs',
7590
),
7691
),
@@ -92,7 +107,7 @@ stylesheets:
92107
If you installed UglifyJs locally, you can find the bin folder inside
93108
the ``node_modules`` folder. It's called ``.bin`` in this case.
94109

95-
You now have access to the ``uglifyjs`` Filter in your application.
110+
You now have access to the ``uglifyjs2`` filter in your application.
96111

97112
Minify your Assets
98113
------------------
@@ -104,15 +119,15 @@ your assets are a part of the view layer, this work is done in your templates:
104119

105120
.. code-block:: html+jinja
106121

107-
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='uglifyjs' %}
122+
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='uglifyjs2' %}
108123
<script src="{{ asset_url }}"></script>
109124
{% endjavascripts %}
110125
111126
.. code-block:: html+php
112127

113128
<?php foreach ($view['assetic']->javascripts(
114129
array('@AcmeFooBundle/Resources/public/js/*'),
115-
array('uglifyjs')
130+
array('uglifyj2s')
116131
) as $url): ?>
117132
<script src="<?php echo $view->escape($url) ?>"></script>
118133
<?php endforeach; ?>
@@ -121,16 +136,55 @@ your assets are a part of the view layer, this work is done in your templates:
121136

122137
The above example assumes that you have a bundle called ``AcmeFooBundle``
123138
and your JavaScript files are in the ``Resources/public/js`` directory under
124-
your bundle. This isn't important however - you can include your Javascript
139+
your bundle. This isn't important however - you can include your JavaScript
125140
files no matter where they are.
126141

127-
With the addition of the ``uglifyjs`` filter to the asset tags above, you should
128-
now see minified JavaScripts coming over the wire much faster.
142+
With the addition of the ``uglifyjs2`` filter to the asset tags above, you
143+
should now see minified JavaScripts coming over the wire much faster.
144+
145+
Disable Minification in Debug Mode
146+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
147+
148+
Minified JavaScripts are very difficult to read, let alone debug. Because of
149+
this, Assetic lets you disable a certain filter when your application is in
150+
debug (e.g. ``app_dev.php``) mode. You can do this by prefixing the filter name
151+
in your template with a question mark: ``?``. This tells Assetic to only
152+
apply this filter when debug mode is off (e.g. ``app.php``):
153+
154+
.. configuration-block::
155+
156+
.. code-block:: html+jinja
157+
158+
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='?uglifyjs2' %}
159+
<script src="{{ asset_url }}"></script>
160+
{% endjavascripts %}
161+
162+
.. code-block:: html+php
163+
164+
<?php foreach ($view['assetic']->javascripts(
165+
array('@AcmeFooBundle/Resources/public/js/*'),
166+
array('?uglifyjs2')
167+
) as $url): ?>
168+
<script src="<?php echo $view->escape($url) ?>"></script>
169+
<?php endforeach; ?>
170+
171+
To try this out, switch to your ``prod`` environment (``app.php``). But before
172+
you do, don't forget to :ref:`clear your cache<book-page-creation-prod-cache-clear>`
173+
and :ref:`dump your assetic assets<cookbook-asetic-dump-prod>`.
174+
175+
.. tip::
176+
177+
Instead of adding the filter to the asset tags, you can also globally
178+
enable it by adding the apply-to attribute to the filter configuration, for
179+
example in the ``uglifyjs2`` filter ``apply_to: "\.js$"``. To only have
180+
the filter applied in production, add this to the ``config_prod`` file
181+
rather than the common config file. For details on applying filters by
182+
file extension, see :ref:`cookbook-assetic-apply-to`.
129183

130184
Install, configure and use UglifyCss
131185
------------------------------------
132186

133-
The usage of `UglifyCss` works the same way as `UglifyJs`. First, make sure
187+
The usage of UglifyCss works the same way as UglifyJs. First, make sure
134188
the node package is installed:
135189

136190
.. code-block:: bash
@@ -169,8 +223,8 @@ Next, add the configuration for this filter:
169223
),
170224
));
171225
172-
To use the filter for your css files, make sure to use the assetics helper in
173-
your template:
226+
To use the filter for your css files, add the filter to the Assetic ``stylesheets``
227+
helper:
174228

175229
.. configuration-block::
176230

@@ -189,42 +243,12 @@ your template:
189243
<link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
190244
<?php endforeach; ?>
191245
192-
Disable Minification in Debug Mode
193-
----------------------------------
194-
195-
Minified JavaScripts are very difficult to read, let alone
196-
debug. Because of this, Assetics lets you disable a certain filter when your
197-
application is in debug mode. You can do this by prefixing the filter name
198-
in your template with a question mark: ``?``. This tells Assetics to only
199-
apply this filter when debug mode is off.
200-
201-
.. configuration-block::
202-
203-
.. code-block:: html+jinja
204-
205-
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='?uglifyjs' %}
206-
<script src="{{ asset_url }}"></script>
207-
{% endjavascripts %}
208-
209-
.. code-block:: html+php
210-
211-
<?php foreach ($view['assetic']->javascripts(
212-
array('@AcmeFooBundle/Resources/public/js/*'),
213-
array('?uglifyjs')
214-
) as $url): ?>
215-
<script src="<?php echo $view->escape($url) ?>"></script>
216-
<?php endforeach; ?>
217-
218-
.. tip::
219-
220-
Instead of adding the filter to the asset tags, you can also globally
221-
enable it by adding the apply-to attribute to the filter configuration, for
222-
example in the ``uglifyjs`` filter ``apply_to: "\.js$"``. To only have the filter
223-
applied in production, add this to the ``config_prod`` file rather than the
224-
common config file. For details on applying filters by file extension,
225-
see :ref:`cookbook-assetic-apply-to`.
226-
246+
Just like with the ``uglifyjs2`` filter, if you prefix the filter name with
247+
``?`` (i.e. ``?uglifycss``), the minification will only happen when you're
248+
not in debug mode.
227249

228250
.. _`UglifyJs`: https://github.com/mishoo/UglifyJS
229251
.. _`UglifyCss`: https://github.com/fmarcia/UglifyCSS
252+
.. _`Node.js`: http://nodejs.org/
230253
.. _`install node.js`: http://nodejs.org/
254+
.. _`package.json`: http://package.json.nodejitsu.com/

‎cookbook/assetic/yuicompressor.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/yuicompressor.rst
+6Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ Yahoo! provides an excellent utility for minifying JavaScripts and stylesheets
88
so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic,
99
you can take advantage of this tool very easily.
1010

11+
.. caution::
12+
13+
The YUI Compressor is going through a `deprecation process`_. But don't
14+
worry! See :doc:`/cookbook/assetic/uglifyjs` for an alternative.
15+
1116
Download the YUI Compressor JAR
1217
-------------------------------
1318

@@ -161,3 +166,4 @@ apply this filter when debug mode is off.
161166

162167
.. _`YUI Compressor`: http://developer.yahoo.com/yui/compressor/
163168
.. _`Download the JAR`: http://yuilibrary.com/projects/yuicompressor/
169+
.. _`deprecation process`: http://www.yuiblog.com/blog/2012/10/16/state-of-yui-compressor/

‎cookbook/map.rst.inc

Copy file name to clipboardExpand all lines: cookbook/map.rst.inc
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
* :doc:`/cookbook/assetic/index`
22

33
* :doc:`/cookbook/assetic/asset_management`
4-
* :doc:`/cookbook/assetic/yuicompressor`
54
* :doc:`/cookbook/assetic/uglifyjs`
5+
* :doc:`/cookbook/assetic/yuicompressor`
66
* :doc:`/cookbook/assetic/jpeg_optimize`
77
* :doc:`/cookbook/assetic/apply_to_option`
88

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.