You are browsing the documentation for Symfony 3.1 which is not maintained anymore.
Consider upgrading your projects to Symfony 5.2.
How to Minify CSS/JS Files (Using UglifyJS and UglifyCSS)
How to Minify CSS/JS Files (Using UglifyJS and UglifyCSS)¶
Caution
Starting from Symfony 2.8, Assetic is no longer included by default in the Symfony Standard Edition. Refer to this article to learn how to install and enable Assetic in your Symfony application.
UglifyJS is a JavaScript parser/compressor/beautifier toolkit. It can be used to combine and minify JavaScript assets so that they require less HTTP requests and make your site load faster. UglifyCSS is a CSS compressor/beautifier that is very similar to UglifyJS.
In this article, the installation, configuration and usage of UglifyJS is shown in detail. UglifyCSS works pretty much the same way and is only talked about briefly.
Install UglifyJS¶
UglifyJS is available as a Node.js module. First, you need to install Node.js and then, decide the installation method: global or local.
Global Installation¶
The global installation method makes all your projects use the very same UglifyJS version, which simplifies its maintenance. Open your command console and execute the following command (you may need to run it as a root user):
1 | $ npm install -g uglify-js
|
Now you can execute the global uglifyjs
command anywhere on your system:
1 | $ uglifyjs --help
|
Local Installation¶
It’s also possible to install UglifyJS inside your project only, which is useful
when your project requires a specific UglifyJS version. To do this, install it
without the -g
option and specify the path where to put the module:
1 2 | $ cd /path/to/your/symfony/project
$ npm install uglify-js --prefix app/Resources
|
It is recommended that you install UglifyJS in your app/Resources
folder and
add the node_modules
folder to version control. Alternatively, you can create
an npm package.json file and specify your dependencies there.
Now you can execute the uglifyjs
command that lives in the node_modules
directory:
1 | $ "./app/Resources/node_modules/.bin/uglifyjs" --help
|
Configure the uglifyjs2
Filter¶
Now we need to configure Symfony to use the uglifyjs2
filter when processing
your JavaScripts:
- YAML
1 2 3 4 5 6
# app/config/config.yml assetic: filters: uglifyjs2: # the path to the uglifyjs executable bin: /usr/local/bin/uglifyjs
- XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!-- app/config/config.xml --> <?xml version="1.0" encoding="UTF-8"?> <container xmlns="http://symfony.com/schema/dic/services" xmlns:assetic="http://symfony.com/schema/dic/assetic" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd http://symfony.com/schema/dic/assetic http://symfony.com/schema/dic/assetic/assetic-1.0.xsd"> <assetic:config> <!-- bin: the path to the uglifyjs executable --> <assetic:filter name="uglifyjs2" bin="/usr/local/bin/uglifyjs" /> </assetic:config> </container>
- PHP
1 2 3 4 5 6 7 8 9
// app/config/config.php $container->loadFromExtension('assetic', array( 'filters' => array( 'uglifyjs2' => array( // the path to the uglifyjs executable 'bin' => '/usr/local/bin/uglifyjs', ), ), ));
Note
The path where UglifyJS is installed may vary depending on your system.
To find out where npm stores the bin
folder, execute the following command:
1 | $ npm bin -g
|
It should output a folder on your system, inside which you should find the UglifyJS executable.
If you installed UglifyJS locally, you can find the bin
folder inside
the node_modules
folder. It’s called .bin
in this case.
You now have access to the uglifyjs2
filter in your application.
Configure the node
Binary¶
Assetic tries to find the node binary automatically. If it cannot be found, you
can configure its location using the node
key:
- YAML
1 2 3 4 5 6 7 8
# app/config/config.yml assetic: # the path to the node executable node: /usr/bin/nodejs filters: uglifyjs2: # the path to the uglifyjs executable bin: /usr/local/bin/uglifyjs
- XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!-- app/config/config.xml --> <?xml version="1.0" encoding="UTF-8"?> <container xmlns="http://symfony.com/schema/dic/services" xmlns:assetic="http://symfony.com/schema/dic/assetic" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd http://symfony.com/schema/dic/assetic http://symfony.com/schema/dic/assetic/assetic-1.0.xsd"> <assetic:config node="/usr/bin/nodejs" > <assetic:filter name="uglifyjs2" bin="/usr/local/bin/uglifyjs" /> </assetic:config> </container>
- PHP
1 2 3 4 5 6 7 8
// app/config/config.php $container->loadFromExtension('assetic', array( 'node' => '/usr/bin/nodejs', 'uglifyjs2' => array( // the path to the uglifyjs executable 'bin' => '/usr/local/bin/uglifyjs', ), ));
Minify your Assets¶
In order to apply UglifyJS on your assets, add the filter
option in the
asset tags of your templates to tell Assetic to use the uglifyjs2
filter:
- Twig
1 2 3
{% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
- PHP
1 2 3 4 5 6
<?php foreach ($view['assetic']->javascripts( array('@AppBundle/Resources/public/js/*'), array('uglifyj2s') ) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach ?>
Note
The above example assumes that you have a bundle called AppBundle and your
JavaScript files are in the Resources/public/js
directory under your
bundle. However you can include your JavaScript files no matter where they are.
With the addition of the uglifyjs2
filter to the asset tags above, you
should now see minified JavaScripts coming over the wire much faster.
Disable Minification in Debug Mode¶
Minified JavaScripts are very difficult to read, let alone debug. Because of
this, Assetic lets you disable a certain filter when your application is in
debug (e.g. app_dev.php
) mode. You can do this by prefixing the filter name
in your template with a question mark: ?
. This tells Assetic to only
apply this filter when debug mode is off (e.g. app.php
):
- Twig
1 2 3
{% javascripts '@AppBundle/Resources/public/js/*' filter='?uglifyjs2' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
- PHP
1 2 3 4 5 6
<?php foreach ($view['assetic']->javascripts( array('@AppBundle/Resources/public/js/*'), array('?uglifyjs2') ) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach ?>
To try this out, switch to your prod
environment (app.php
). But before
you do, don’t forget to clear your cache
and dump your assetic assets.
Tip
Instead of adding the filters to the asset tags, you can also configure which filters to apply for each file in your application configuration file. See Filtering Based on a File Extension for more details.
Install, Configure and Use UglifyCSS¶
The usage of UglifyCSS works the same way as UglifyJS. First, make sure the node package is installed:
1 2 3 4 5 6 | # global installation
$ npm install -g uglifycss
# local installation
$ cd /path/to/your/symfony/project
$ npm install uglifycss --prefix app/Resources
|
Next, add the configuration for this filter:
- YAML
1 2 3 4 5
# app/config/config.yml assetic: filters: uglifycss: bin: /usr/local/bin/uglifycss
- XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!-- app/config/config.xml --> <?xml version="1.0" encoding="UTF-8"?> <container xmlns="http://symfony.com/schema/dic/services" xmlns:assetic="http://symfony.com/schema/dic/assetic" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd http://symfony.com/schema/dic/assetic http://symfony.com/schema/dic/assetic/assetic-1.0.xsd"> <assetic:config> <assetic:filter name="uglifycss" bin="/usr/local/bin/uglifycss" /> </assetic:config> </container>
- PHP
1 2 3 4 5 6 7 8
// app/config/config.php $container->loadFromExtension('assetic', array( 'filters' => array( 'uglifycss' => array( 'bin' => '/usr/local/bin/uglifycss', ), ), ));
To use the filter for your CSS files, add the filter to the Assetic stylesheets
helper:
- Twig
1 2 3
{% stylesheets 'bundles/App/css/*' filter='uglifycss' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}
- PHP
1 2 3 4 5 6 7
<?php foreach ($view['assetic']->stylesheets( array('bundles/App/css/*'), array('uglifycss'), array('cssrewrite') ) as $url): ?> <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" /> <?php endforeach ?>
Just like with the uglifyjs2
filter, if you prefix the filter name with
?
(i.e. ?uglifycss
), the minification will only happen when you’re
not in debug mode.
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.