Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • SensioLabs Professional services to help you with Symfony
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Assetic
  4. How to Minify CSS/JS Files (Using UglifyJS and UglifyCSS)
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Install UglifyJS
    • Global Installation
    • Local Installation
  • Configure the uglifyjs2 Filter
  • Configure the node Binary
  • Minify your Assets
    • Disable Minification in Debug Mode
  • Install, Configure and Use UglifyCSS

How to Minify CSS/JS Files (Using UglifyJS and UglifyCSS)

Edit this page

Warning: You are browsing the documentation for Symfony 3.0, which is no longer maintained.

Read the updated version of this page for Symfony 6.2 (the current stable version).

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:

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
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>
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:

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
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>
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:

1
2
3
{% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
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):

1
2
3
{% javascripts '@AppBundle/Resources/public/js/*' filter='?uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
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 How to Apply an Assetic Filter to a specific 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:

1
2
3
4
5
# app/config/config.yml
assetic:
    filters:
        uglifycss:
            bin: /usr/local/bin/uglifycss
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>
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 'bundles/App/css/*' filter='uglifycss' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
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.
TOC
    Version
    We stand with Ukraine.
    Version:
    Symfony Code Performance Profiling

    Symfony Code Performance Profiling

    Check Code Performance in Dev, Test, Staging & Production

    Check Code Performance in Dev, Test, Staging & Production

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Gytis Šk, a Symfony contributor

    Thanks Gytis Šk for being a Symfony contributor

    1 commit • 2 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony