Install UglifyJS

UglifyJS is available as an Node.js npm module and can be installed using npm. First, you need to install Node.js. Afterwards you can install UglifyJS using npm:

1

$ npm install -g uglify-js

This command will install UglifyJS globally and you may need to run it as a root user.

1
2
3

$ cd /path/to/symfony
$ mkdir app/Resources/node_modules
$ npm install uglify-js --prefix app/Resources

Depending on your installation method, you should either be able to execute the uglifyjs executable globally, or execute the physical file that lives in the node_modules directory:

1
2
3

$ uglifyjs --help

$ ./app/Resources/node_modules/.bin/uglifyjs --help

Configure the uglifyjs2 Filter

Now we need to configure Symfony2 to use the uglifyjs2 filter when processing your JavaScripts:

1
2
3
4
5
6

# app/config/config.yml
assetic:
    filters:
        uglifyjs2:
            # the path to the uglifyjs executable
            bin: /usr/local/bin/uglifyjs

1
2
3
4
5
6

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
        name="uglifyjs2"
        bin="/usr/local/bin/uglifyjs" />
</assetic:config>

1
2
3
4
5
6
7
8

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'uglifyjs2' => array(
            'bin' => '/usr/local/bin/uglifyjs',
        ),
    ),
));

1

$ npm bin -g

You now have access to the uglifyjs2 filter in your application.

Minify your Assets

In order to use UglifyJS on your assets, you need to apply it to them. Since your assets are a part of the view layer, this work is done in your templates:

1
2
3

{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

1
2
3
4
5
6

<?php foreach ($view['assetic']->javascripts(
    array('@AcmeFooBundle/Resources/public/js/*'),
    array('uglifyj2s')
) as $url): ?>
    <script src="<?php echo $view->escape($url) ?>"></script>
<?php endforeach; ?>

With the addition of the uglifyjs2 filter to the asset tags above, you should now see minified JavaScripts coming over the wire much faster.

1
2
3

{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='?uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

1
2
3
4
5
6

<?php foreach ($view['assetic']->javascripts(
    array('@AcmeFooBundle/Resources/public/js/*'),
    array('?uglifyjs2')
) as $url): ?>
    <script src="<?php echo $view->escape($url) ?>"></script>
<?php endforeach; ?>

Install, configure and use UglifyCSS

The usage of UglifyCSS works the same way as UglifyJS. First, make sure the node package is installed:

1

$ npm install -g uglifycss

Next, add the configuration for this filter:

1
2
3
4
5

# app/config/config.yml
assetic:
    filters:
        uglifycss:
            bin: /usr/local/bin/uglifycss

1
2
3
4
5
6

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
        name="uglifycss"
        bin="/usr/local/bin/uglifycss" />
</assetic:config>

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:

1
2
3

{% stylesheets '@AcmeFooBundle/Resources/public/css/*' filter='uglifycss' %}
     <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

1
2
3
4
5
6

<?php foreach ($view['assetic']->stylesheets(
    array('@AcmeFooBundle/Resources/public/css/*'),
    array('uglifycss')
) 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.