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 f418e20

Browse filesBrowse files
javiereguiluzjaviereguiluz
committed
Reviewed the Assetic cookbook articles
1 parent 51af15d commit f418e20
Copy full SHA for f418e20

File tree

Expand file treeCollapse file tree

5 files changed

+88
-90
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+88
-90
lines changed

‎cookbook/assetic/apply_to_option.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/apply_to_option.rst
+10-11Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ as you'll see here, files that have a specific extension. To show you how
99
to handle each option, suppose that you want to use Assetic's CoffeeScript
1010
filter, which compiles CoffeeScript files into JavaScript.
1111

12-
The main configuration is just the paths to coffee, node and node_modules.
12+
The main configuration is just the paths to ``coffee``, ``node`` and ``node_modules``.
1313
An example configuration might look like this:
1414

1515
.. configuration-block::
@@ -102,8 +102,7 @@ You can also combine multiple CoffeeScript files into a single output file:
102102
<script src="<?php echo $view->escape($url) ?>"></script>
103103
<?php endforeach ?>
104104

105-
Both the files will now be served up as a single file compiled into regular
106-
JavaScript.
105+
Both files will now be served up as a single file compiled into regular JavaScript.
107106

108107
.. _cookbook-assetic-apply-to:
109108

@@ -117,10 +116,10 @@ since they will ultimately all be served as JavaScript. Unfortunately just
117116
adding the JavaScript files to the files to be combined as above will not
118117
work as the regular JavaScript files will not survive the CoffeeScript compilation.
119118

120-
This problem can be avoided by using the ``apply_to`` option in the config,
121-
which allows you to specify which filter should always be applied to particular
122-
file extensions. In this case you can specify that the ``coffee`` filter is
123-
applied to all ``.coffee`` files:
119+
This problem can be avoided by using the ``apply_to`` option, which allows you
120+
to specify which filter should always be applied to particular file extensions.
121+
In this case you can specify that the ``coffee`` filter is applied to all
122+
``.coffee`` files:
124123

125124
.. configuration-block::
126125

@@ -161,10 +160,10 @@ applied to all ``.coffee`` files:
161160
),
162161
));
163162
164-
With this, you no longer need to specify the ``coffee`` filter in the template.
165-
You can also list regular JavaScript files, all of which will be combined
166-
and rendered as a single JavaScript file (with only the ``.coffee`` files
167-
being run through the CoffeeScript filter):
163+
With this option, you no longer need to specify the ``coffee`` filter in the
164+
template. You can also list regular JavaScript files, all of which will be
165+
combined and rendered as a single JavaScript file (with only the ``.coffee``
166+
files being run through the CoffeeScript filter):
168167

169168
.. configuration-block::
170169

‎cookbook/assetic/asset_management.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/asset_management.rst
+17-17Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ To include JavaScript files, use the ``javascripts`` tag in any template:
7373
7474
.. note::
7575

76-
If you're using the default block names from the Symfony Standard Edition,
77-
the ``javascripts`` tag will most commonly live in the ``javascripts``
78-
block:
76+
If your application templates use the default block names from the Symfony
77+
Standard Edition, the ``javascripts`` tag will most commonly live in the
78+
``javascripts`` block:
7979

8080
.. code-block:: html+jinja
8181

@@ -108,8 +108,8 @@ that reference images by their relative path. See :ref:`cookbook-assetic-cssrewr
108108
Including CSS Stylesheets
109109
~~~~~~~~~~~~~~~~~~~~~~~~~
110110

111-
To bring in CSS stylesheets, you can use the same methodologies seen
112-
above, except with the ``stylesheets`` tag:
111+
To bring in CSS stylesheets, you can use the same technique explained above,
112+
except with the ``stylesheets`` tag:
113113

114114
.. configuration-block::
115115

@@ -130,9 +130,9 @@ above, except with the ``stylesheets`` tag:
130130
131131
.. note::
132132

133-
If you're using the default block names from the Symfony Standard Edition,
134-
the ``stylesheets`` tag will most commonly live in the ``stylesheets``
135-
block:
133+
If your application templates use the default block names from the Symfony
134+
Standard Edition, the ``stylesheets`` tag will most commonly live in the
135+
``stylesheets`` block:
136136

137137
.. code-block:: html+jinja
138138

@@ -204,7 +204,7 @@ Combining Assets
204204
~~~~~~~~~~~~~~~~
205205

206206
One feature of Assetic is that it will combine many files into one. This helps
207-
to reduce the number of HTTP requests, which is great for front end performance.
207+
to reduce the number of HTTP requests, which is great for frontend performance.
208208
It also allows you to maintain the files more easily by splitting them into
209209
manageable parts. This can help with re-usability as you can easily split
210210
project-specific files from those which can be used in other applications,
@@ -350,7 +350,7 @@ Filters
350350

351351
Once they're managed by Assetic, you can apply filters to your assets before
352352
they are served. This includes filters that compress the output of your assets
353-
for smaller file sizes (and better front-end optimization). Other filters
353+
for smaller file sizes (and better frontend optimization). Other filters
354354
can compile JavaScript file from CoffeeScript files and process SASS into CSS.
355355
In fact, Assetic has a long list of available filters.
356356

@@ -366,8 +366,8 @@ To use a filter, you first need to specify it in the Assetic configuration.
366366
Adding a filter here doesn't mean it's being used - it just means that it's
367367
available to use (you'll use the filter below).
368368

369-
For example to use the UglifyJS JavaScript minifier the following config should
370-
be added:
369+
For example to use the UglifyJS JavaScript minifier the following configuration
370+
should be defined:
371371

372372
.. configuration-block::
373373

@@ -489,8 +489,8 @@ environment is just too slow.
489489

490490
.. _cookbook-assetic-dump-prod:
491491

492-
Instead, each time you use your app in the ``prod`` environment (and therefore,
493-
each time you deploy), you should run the following task:
492+
Instead, each time you use your application in the ``prod`` environment (and therefore,
493+
each time you deploy), you should run the following command:
494494

495495
.. code-block:: bash
496496
@@ -532,7 +532,7 @@ the following change in your ``config_dev.yml`` file:
532532
));
533533
534534
Next, since Symfony is no longer generating these assets for you, you'll
535-
need to dump them manually. To do so, run the following:
535+
need to dump them manually. To do so, run the following command:
536536

537537
.. code-block:: bash
538538
@@ -547,8 +547,8 @@ assets will be regenerated automatically *as they change*:
547547
548548
$ php app/console assetic:watch
549549
550-
The ``assetic:watch`` command was introduced in AsseticBundle 2.4. In prior
551-
versions, you had to use the ``--watch`` option of the ``assetic:dump``
550+
The ``assetic:watch`` command was introduced in AsseticBundle 2.4. In prior
551+
versions, you had to use the ``--watch`` option of the ``assetic:dump``
552552
command for the same behavior.
553553

554554
Since running this command in the ``dev`` environment may generate a bunch

‎cookbook/assetic/jpeg_optimize.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/jpeg_optimize.rst
+14-17Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ for your end users.
1313
Using Jpegoptim
1414
---------------
1515

16-
`Jpegoptim`_ is a utility for optimizing JPEG files. To use it with Assetic,
17-
add the following to the Assetic config:
16+
`Jpegoptim`_ is a utility for optimizing JPEG files. To use it with Assetic, make
17+
sure to have it already installed on your system and then, configure its location
18+
using the ``bin`` option of the ``jpegoptim`` filter:
1819

1920
.. configuration-block::
2021

@@ -46,11 +47,6 @@ add the following to the Assetic config:
4647
),
4748
));
4849
49-
.. note::
50-
51-
Notice that to use jpegoptim, you must have it already installed on your
52-
system. The ``bin`` option points to the location of the compiled binary.
53-
5450
It can now be used from a template:
5551

5652
.. configuration-block::
@@ -74,9 +70,9 @@ It can now be used from a template:
7470
Removing all EXIF Data
7571
~~~~~~~~~~~~~~~~~~~~~~
7672

77-
By default, running this filter only removes some of the meta information
78-
stored in the file. Any EXIF data and comments are not removed, but you can
79-
remove these by using the ``strip_all`` option:
73+
By default, the ``jpegoptim`` filter removes some of the meta information stored
74+
in the image. To remove all EXIF data and comments, set the ``strip_all`` option
75+
to ``true``:
8076

8177
.. configuration-block::
8278

@@ -111,13 +107,13 @@ remove these by using the ``strip_all`` option:
111107
),
112108
));
113109
114-
Lowering maximum Quality
110+
Lowering Maximum Quality
115111
~~~~~~~~~~~~~~~~~~~~~~~~
116112

117-
The quality level of the JPEG is not affected by default. You can gain
118-
further file size reductions by setting the max quality setting lower than
119-
the current level of the images. This will of course be at the expense of
120-
image quality:
113+
By default, the ``jpegoptim`` filter doesn't alter the quality level of the JPEG
114+
image. Use the ``max`` option to configure the maximum quality setting (in a
115+
scale of ``0`` to ``100``). The reduction in the image file size will of course
116+
be at the expense of its quality:
121117

122118
.. configuration-block::
123119

@@ -157,7 +153,7 @@ Shorter Syntax: Twig Function
157153

158154
If you're using Twig, it's possible to achieve all of this with a shorter
159155
syntax by enabling and using a special Twig function. Start by adding the
160-
following config:
156+
following configuration:
161157

162158
.. configuration-block::
163159

@@ -206,7 +202,8 @@ The Twig template can now be changed to the following:
206202

207203
<img src="{{ jpegoptim('@AppBundle/Resources/public/images/example.jpg') }}" alt="Example"/>
208204

209-
You can specify the output directory in the config in the following way:
205+
You can also specify the output directory for images in the Assetic configuration
206+
file:
210207

211208
.. configuration-block::
212209

‎cookbook/assetic/uglifyjs.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/uglifyjs.rst
+41-34Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,47 @@ talked about briefly.
1616
Install UglifyJS
1717
----------------
1818

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:
19+
UglifyJS is available as a `Node.js`_ module. First, you need to `install Node.js`_
20+
and then, decide the installation method: global or local.
21+
22+
Global Installation
23+
~~~~~~~~~~~~~~~~~~~
24+
25+
The global installation method makes all your projects use the very same UglifyJS
26+
version, which simplifies its maintenance. Open your command console and execute
27+
the following command (you may need to run it as a root user):
2228

2329
.. code-block:: bash
2430
2531
$ npm install -g uglify-js
2632
27-
This command will install UglifyJS globally and you may need to run it as
28-
a root user.
33+
Now you can execute the global ``uglifyjs`` command anywhere on your system:
2934

30-
.. note::
35+
.. code-block:: bash
3136
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:
37+
$ uglifyjs --help
3538
36-
.. code-block:: bash
39+
Local Installation
40+
~~~~~~~~~~~~~~~~~~
3741

38-
$ cd /path/to/symfony
39-
$ mkdir app/Resources/node_modules
40-
$ npm install uglify-js --prefix app/Resources
42+
It's also possible to install UglifyJS inside your project only, which is useful
43+
when your project requires an specific UglifyJS version. To do this, install it
44+
without the ``-g`` option and specify the path where to put the module:
4145

42-
It is recommended that you install UglifyJS in your ``app/Resources`` folder
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+
.. code-block:: bash
4647
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:
48+
$ cd /path/to/your/symfony/project
49+
$ mkdir app/Resources/node_modules
50+
$ npm install uglify-js --prefix app/Resources
5051
51-
.. code-block:: bash
52+
It is recommended that you install UglifyJS in your ``app/Resources`` folder and
53+
add the ``node_modules`` folder to version control. Alternatively, you can create
54+
an npm `package.json`_ file and specify your dependencies there.
5255

53-
$ uglifyjs --help
56+
Now you can execute the ``uglifyjs`` command that lives in the ``node_modules``
57+
directory:
58+
59+
.. code-block:: bash
5460
5561
$ ./app/Resources/node_modules/.bin/uglifyjs --help
5662
@@ -96,8 +102,7 @@ your JavaScripts:
96102
.. note::
97103

98104
The path where UglifyJS is installed may vary depending on your system.
99-
To find out where npm stores the ``bin`` folder, you can use the following
100-
command:
105+
To find out where npm stores the ``bin`` folder, execute the following command:
101106

102107
.. code-block:: bash
103108
@@ -154,8 +159,8 @@ can configure its location using the ``node`` key:
154159
Minify your Assets
155160
------------------
156161

157-
In order to use UglifyJS on your assets, you need to apply it to them. Since
158-
your assets are a part of the view layer, this work is done in your templates:
162+
In order to apply UglifyJS on your assets, add the ``filter`` option in the
163+
asset tags of your templates to tell Assetic to use the ``uglifyjs2`` filter:
159164

160165
.. configuration-block::
161166

@@ -178,8 +183,7 @@ your assets are a part of the view layer, this work is done in your templates:
178183

179184
The above example assumes that you have a bundle called AppBundle and your
180185
JavaScript files are in the ``Resources/public/js`` directory under your
181-
bundle. This isn't important however - you can include your JavaScript
182-
files no matter where they are.
186+
bundle. However you can include your JavaScript files no matter where they are.
183187

184188
With the addition of the ``uglifyjs2`` filter to the asset tags above, you
185189
should now see minified JavaScripts coming over the wire much faster.
@@ -216,12 +220,9 @@ and :ref:`dump your assetic assets <cookbook-assetic-dump-prod>`.
216220

217221
.. tip::
218222

219-
Instead of adding the filter to the asset tags, you can also globally
220-
enable it by adding the ``apply_to`` attribute to the filter configuration, for
221-
example in the ``uglifyjs2`` filter ``apply_to: "\.js$"``. To only have
222-
the filter applied in production, add this to the ``config_prod`` file
223-
rather than the common config file. For details on applying filters by
224-
file extension, see :ref:`cookbook-assetic-apply-to`.
223+
Instead of adding the filters to the asset tags, you can also configure which
224+
filters to apply for each file in your application configuration file.
225+
See :ref:`cookbook-assetic-apply-to` for more details.
225226

226227
Install, Configure and Use UglifyCSS
227228
------------------------------------
@@ -231,8 +232,14 @@ the node package is installed:
231232

232233
.. code-block:: bash
233234
235+
# global installation
234236
$ npm install -g uglifycss
235237
238+
# local installation
239+
$ cd /path/to/your/symfony/project
240+
$ mkdir app/Resources/node_modules
241+
$ npm install uglifycss --prefix app/Resources
242+
236243
Next, add the configuration for this filter:
237244

238245
.. configuration-block::

‎cookbook/assetic/yuicompressor.rst

Copy file name to clipboardExpand all lines: cookbook/assetic/yuicompressor.rst
+6-11Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,15 @@
44
How to Minify JavaScripts and Stylesheets with YUI Compressor
55
=============================================================
66

7-
Yahoo! provides an excellent utility for minifying JavaScripts and stylesheets
8-
so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic,
9-
you can take advantage of this tool very easily.
10-
117
.. caution::
128

13-
The YUI Compressor is `no longer maintained by Yahoo`_ but by an independent
14-
volunteer. Moreover, Yahoo has decided to `stop all new development on YUI`_
15-
and to move to other modern alternatives such as Node.js.
9+
The YUI Compressor is `no longer maintained by Yahoo`_. That's why you are
10+
**strongly advised to avoid using YUI utilities** unless strictly necessary.
11+
Read :doc:`/cookbook/assetic/uglifyjs` for a modern and up-to-date alternative.
1612

17-
That's why you are **strongly advised** to avoid using YUI utilities unless
18-
strictly necessary. Read :doc:`/cookbook/assetic/uglifyjs` for a modern and
19-
up-to-date alternative.
13+
Yahoo! provides an excellent utility for minifying JavaScripts and stylesheets
14+
so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic,
15+
you can take advantage of this tool very easily.
2016

2117
Download the YUI Compressor JAR
2218
-------------------------------
@@ -170,4 +166,3 @@ apply this filter when debug mode is off.
170166
.. _`YUI Compressor`: http://developer.yahoo.com/yui/compressor/
171167
.. _`Download the JAR`: https://github.com/yui/yuicompressor/releases
172168
.. _`no longer maintained by Yahoo`: http://www.yuiblog.com/blog/2013/01/24/yui-compressor-has-a-new-owner/
173-
.. _`stop all new development on YUI`: http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

0 commit comments

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