Skip to content

Commit 9c2479b

Browse files
richardmiller-zzrichardmiller-zz
committed
Adding Assetic coffeescript/apply_to cookbook article
1 parent d24050a commit 9c2479b

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎cookbook/assetic/apply_to_option.rst

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
How to Apply an Assetic Filter to a Specified File Extension
2+
============================================================
3+
4+
One of Assetic's filters compiles CoffeeScript files into JavaScript.
5+
This offers the advantages of caching the end result so the compilation
6+
does not run every time whilst also automatically recompiling when ever
7+
the script changes during development.
8+
9+
Whilst Assetic's ``CoffeeScriptFilter`` will do the work for you it does
10+
not do the actual compilation, you will still need to install CoffeeScript
11+
itself along with node.js on which it runs.
12+
13+
The main configuration is just the paths to coffee and node. These default
14+
respectively to ``/usr/bin/coffee`` and ``/usr/bin/node``:
15+
16+
.. configuration-block::
17+
18+
.. code-block:: yaml
19+
20+
# app/config/config.yml
21+
assetic:
22+
filters:
23+
coffee:
24+
bin: /usr/bin/coffee
25+
node: /usr/bin/node
26+
27+
.. code-block:: xml
28+
29+
<!-- app/config/config.xml -->
30+
<assetic:config>
31+
<assetic:filter
32+
name="coffee"
33+
bin="/usr/bin/coffee"
34+
node="/usr/bin/node" />
35+
</assetic:config>
36+
37+
.. code-block:: php
38+
39+
// app/config/config.php
40+
$container->loadFromExtension('assetic', array(
41+
'filters' => array(
42+
'jpegoptim' => array(
43+
'bin' => '/usr/bin/coffee',
44+
'node' => '/usr/bin/node',
45+
),
46+
),
47+
));
48+
49+
50+
You can then serve up CoffeeScript files as JavaScript from within your
51+
templates:
52+
53+
.. configuration-block::
54+
55+
.. code-block:: html+jinja
56+
57+
{% javascripts '@AcmeFooBundle/Resources/public/js/example.coffee'
58+
filter='coffee'
59+
%}
60+
<script src="{{ asset_url }} type="text/javascript"></script>
61+
{% endjavascripts %}
62+
63+
.. code-block:: html+php
64+
65+
<?php foreach ($view['assetic']->javascripts(
66+
array('@AcmeFooBundle/Resources/public/js/example.coffee'),
67+
array('coffee')) as $url): ?>
68+
<script src="<?php echo $view->escape($url) ?>" type="text/javascript"></script>
69+
<?php endforeach; ?>
70+
71+
72+
This is all was needed and the file was served up as regular JavaScript.
73+
You can combine multiple CoffeeScript files into a single output file:
74+
75+
.. configuration-block::
76+
77+
.. code-block:: html+jinja
78+
79+
{% javascripts '@AcmeFooBundle/Resources/public/js/example.coffee'
80+
'@AcmeFooBundle/Resources/public/js/another.coffee'
81+
filter='coffee'
82+
%}
83+
<script src="{{ asset_url }} type="text/javascript"></script>
84+
{% endjavascripts %}
85+
86+
.. code-block:: html+php
87+
88+
<?php foreach ($view['assetic']->javascripts(
89+
array('@AcmeFooBundle/Resources/public/js/example.coffee',
90+
'@AcmeFooBundle/Resources/public/js/another.coffee'),
91+
array('coffee')) as $url): ?>
92+
<script src="<?php echo $view->escape($url) ?>" type="text/javascript"></script>
93+
<?php endforeach; ?>
94+
95+
96+
Both the files will now be served up as a single file compiled into regular
97+
JavaScript.
98+
99+
One of the great advantages of using Assetic is reducing the number of asset
100+
files to lower ``HTTP`` requests. In order to make full use of this it would
101+
be good to combine all your JavaScript and CoffeeScript files together
102+
since they will ultimately all be served as JavaScript. Unfortunately just
103+
adding the JavaScript files to the files to be combined as above will not
104+
work as the regular JavaScript files will not survive the CoffeeScript compilation.
105+
106+
This problem can be avoid though by using the ``apply_to`` option in the
107+
config, this allows you to specify that a filter is always applied to particular
108+
file extensions. In this case you can specify that the Coffee filter is
109+
applied to all ``.coffee`` files:
110+
111+
.. configuration-block::
112+
113+
.. code-block:: yaml
114+
115+
# app/config/config.yml
116+
assetic:
117+
filters:
118+
coffee:
119+
bin: /usr/bin/coffee
120+
node: /usr/bin/node
121+
apply_to: "\.coffee$"
122+
123+
.. code-block:: xml
124+
125+
<!-- app/config/config.xml -->
126+
<assetic:config>
127+
<assetic:filter
128+
name="coffee"
129+
bin="/usr/bin/coffee"
130+
node="/usr/bin/node"
131+
apply_to="\.coffee$" />
132+
</assetic:config>
133+
134+
.. code-block:: php
135+
136+
// app/config/config.php
137+
$container->loadFromExtension('assetic', array(
138+
'filters' => array(
139+
'jpegoptim' => array(
140+
'bin' => '/usr/bin/coffee',
141+
'node' => '/usr/bin/node',
142+
'apply_to' => '\.coffee$',
143+
),
144+
),
145+
));
146+
147+
148+
149+
So you can now remove specifying the filter in the Twig template and list
150+
any regular JavaScript files which will now be combined into the output
151+
file without having been run through coffee:
152+
153+
.. configuration-block::
154+
155+
.. code-block:: html+jinja
156+
157+
{% javascripts '@AcmeFooBundle/Resources/public/js/example.coffee'
158+
'@AcmeFooBundle/Resources/public/js/another.coffee'
159+
'@AcmeFooBundle/Resources/public/js/regular.js'
160+
%}
161+
<script src="{{ asset_url }} type="text/javascript"></script>
162+
{% endjavascripts %}
163+
164+
.. code-block:: html+php
165+
166+
<?php foreach ($view['assetic']->javascripts(
167+
array('@AcmeFooBundle/Resources/public/js/example.coffee',
168+
'@AcmeFooBundle/Resources/public/js/another.coffee',
169+
'@AcmeFooBundle/Resources/public/js/regular.js'),
170+
as $url): ?>
171+
<script src="<?php echo $view->escape($url) ?>" type="text/javascript"></script>
172+
<?php endforeach; ?>

0 commit comments

Comments
 (0)