Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

Applying a Minification Filter

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $6.00

Applying a Minification Filter

Open up the built CSS file. Ugh. All that nasty whitespace that my user’s are going to download. Is there nothing we can do?

Reason #1 to use Assetic was because of its filters, like cssrewrite. It also has filters to minify assets. Your best option is to use a binary called uglifycss through Assetic. There’s also an uglify-js.

Intalling uglifycss with npm

We’re also going to get a crash-course in npm, the Composer for node.js. Very Rebel hipster of us.

First, create a nearly empty package.json file - this is like the composer.json for node libraries:

{
}

Next, install uglify!

npm install uglifycss --save

If you don’t have npm, install node.js to get it. This installs uglifycss into a node_modules directory. It also updated our package.json file to have this library. Another developer on the project only needs to run npm install to download uglify. Nice. In fact, let’s add node_modules/ to our .gitignore file, just like we did for the vendor/ directory:

# .gitignore
# ...

/node_modules

Configuring and Using the Filter

The rest is a breeze. Configure the filter in config.yml under the assetic key. Basically, add an uglifycss filter and point it to where the new executable lives:

# app/config/config.yml
# ...

assetic:
    # ...
    filters:
        cssrewrite: ~
        uglifycss:
            bin: %kernel.root_dir%/../node_modules/.bin/uglifycss

That node_modules.bin/uglifycss is a physical binary that was downloaded. The %kernel.root_dir% is a parameter that points to app/. We’ll talk about parameters in a second.

To actually use uglify, add it to the stylesheets block:

{# app/Resources/views/base.html.twig #}
{# ... #}

{% stylesheets
    'bundles/event/css/event.css'
    'bundles/event/css/events.css'
    'bundles/event/css/main.css'
    filter='cssrewrite'
    filter='uglifycss'
    output='css/built/layout.css'
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Head back to the dev environment and refresh. And when we look at one of the CSS files, no more nasty whitespace.

Applying a Filter only in the prod Environment

Ok, I got a little over-excited about whitespace and made working with CSS hell. Our browser thinks that every style is coming from line 1 of these files... because there’s only one line in each. Good luck frontend people!

Really, I want the uglifycss filter to only run in the prod environment. We can do just this by adding a ? before the filter name:

{# app/Resources/views/base.html.twig #}
{# ... #}

{% stylesheets
    'bundles/event/css/event.css'
    'bundles/event/css/events.css'
    'bundles/event/css/main.css'
    filter='cssrewrite'
    filter='?uglifycss'
    output='css/built/layout.css'
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Refresh in the dev environment. Cool, whitespace restored. Now switch over to the prod environment, clear your cache and re-dump the assets:

php app/console cache:clear --env=prod
php app/console assetic:dump --env=prod

Now, layout.css is a physical file and has no whitespace. That’s perfect.

Assetic with JavaScript Files

We just did this all with CSS, but it’s all the same with JavaScript. Instead of a stylesheets tag, there’s a javascripts tag that works exactly the same. Symfony has a cookbook entry about this, but seriously, it’s no different at all. Even the minification is the same, except that the library is called uglify-js.

In other words, you now know pretty much everything you need to about Assetic. If you start using it a lot and notice your pages loading slower and slower, check out the use_controller option that’s mentioned on that same page.

Ok, back to work!

Leave a comment!

4
Login or Register to join the conversation
Agnes Avatar

To get this wo work in Windows environment I had to add

node: null
to the uglifycss settings in config.yml

1 Reply

Well, there is not jsrewrite filter. What would be the equivalent for javascripts?

Reply

Hey Daniel!

Ideally, you shouldn't have the same problem in JS: JS files normally don't refer to other JS files or CSS paths. What's your situation?

1 Reply

Ryan, my mistake. Your're absolutely right! There is no need of a 'jsrewrite' filter or sort. With the uglifyjs is enough, I only want one compress js file on my production environment. Thanks.

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.3.3",
        "symfony/symfony": "~2.4", // v2.4.2
        "doctrine/orm": "~2.2,>=2.2.3", // v2.4.2
        "doctrine/doctrine-bundle": "~1.2", // v1.2.0
        "twig/extensions": "~1.0", // v1.0.1
        "symfony/assetic-bundle": "~2.3", // v2.3.0
        "symfony/swiftmailer-bundle": "~2.3", // v2.3.5
        "symfony/monolog-bundle": "~2.4", // v2.5.0
        "sensio/distribution-bundle": "~2.3", // v2.3.4
        "sensio/framework-extra-bundle": "~3.0", // v3.0.0
        "sensio/generator-bundle": "~2.3", // v2.3.4
        "incenteev/composer-parameter-handler": "~2.0", // v2.1.0
        "doctrine/doctrine-fixtures-bundle": "~2.2.0", // v2.2.0
        "ircmaxell/password-compat": "~1.0.3", // 1.0.3
        "phpunit/phpunit": "~4.1", // 4.1.0
        "stof/doctrine-extensions-bundle": "~1.1.0" // v1.1.0
    }
}
userVoice