Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Build with Symfony3 – fine tune

After part-8 is done

you may one to fine tune or change a part somewhere.

Well this is where I’ll add things I normally don’t want or need within the project, but is nice to it can be reproduced quickly with a tutorial.

Assetic
The Symfony2 Standard Distribution is bundled with a library for Assets management called Assetic. The library was developed by Kris Wallsmith and was inspired by the Python library webassets.

Assetic deals with 2 parts of asset management, the assets such as images, Stylesheets and JavaScript and the filters that can be applied to these assets. These filters are able to perform useful tasks such as minifying your CSS and JavaScript, passing CoffeeScript files through the CoffeeScript compiler, and combining asset files together to reduce the number of HTTP requests made to the server.

Currently we have been using the Twig asset function to include assets into the template as follows.

The calls to the asset function will be replaced by Assetic.

Assets
The Assetic library describes an asset as follows:

An Assetic asset is something with filterable content
that can be loaded and dumped. An asset also includes metadata,
some of which can be manipulated and some of which is immutable.

Put simply, the assets are the resources the application uses such as stylesheets and images.

To enable Assetic for the AppBundle we have to change the app/config/config.yml as follows.

# ..
assetic:
    bundles:    [AppBundle]
# ..

This will enable Assetic just for the AppBundle and will require adjustments whenever a new bundle needs to use Assetic. We can however completely remove the bundles line and enable it for all future bundles as well.

Stylesheets
Let’s begin by replacing the current calls to asset for the stylesheets in the AppBundle main layout template. Update the content of the template located at src/AppBundle/Resources/views/layout.html.twig with the following.

{# src/AppBundle/Resources/views/layout.html.twig #}

{# .. #}

{% block stylesheets %}
    {{ parent () }}

    {% stylesheets
        '@AppBundle/Resources/public/css/*'
    %}
        
    {% endstylesheets %}
{% endblock %}

{# .. #}

We have replaced the 2 previous links for CSS files with some Assetic functionality. Using stylesheets from Assetic we have specified that all CSS files in the location src/AppBundle/Resources/public/css should be combined into 1 file and then output. Combining files is a very simple but effective way to optimise your website frontend by reducing the number of files needed. Fewer files means fewer HTTP requests to the server. While we used the * to specify all files in the css directory we could have simply listed each file individually as follows.

{# src/AppBundle/Resources/views/layout.html.twig #}

{# .. #}

{% block stylesheets %}
    {{ parent () }}

    {% stylesheets
        '@AppBundle/Resources/public/css/blog.css'
        '@AppBlogBundle/Resources/public/css/sidebar.css'
    %}
        
    {% endstylesheets %}
{% endblock %}

{# .. #}

The end result in both cases is the same. The first option using the * ensures that when new CSS files are added to the directory, they will always be included in the combined CSS file by Assetic. This may not be the desired functionality for your website, so use either method above to suit your needs.

If you have a look at the HTML output via http://hubshark.dev/app_dev.php/ you will see the CSS has been included something like this (Notice we are running back in the development environment again).

Firstly you may be wondering why there are 2 files. Above it was stated that Assetic would combine the files into 1 CSS file. This is because we are running hubshark in the development environment. We can ask Assetic to run in non-debug mode by setting the debug flag to false as follows.

{# src/AppBundle/Resources/views/layout.html.twig #}

{# .. #}

{% stylesheets
    '@AppBundle/Resources/public/css/*'
    debug=false
%}
    
{% endstylesheets %}

{# .. #}

Now if you look at the rendered HTML you will see something like this.

If you view the contents of this file you will see the 2 CSS files, blog.css and sidebar.css have been combined into 1 file. The filename given to the generated CSS file is randomly generated by Assetic. If you would like to control the name given to the generated file use the output option as follows.

{% stylesheets
    '@AppBundle/Resources/public/css/*'
    output='css/blog.css'
%}
    
{% endstylesheets %}

Before you continue remove the debug flag from the previous snippet as we want to resume default behavior on the assets.

We also need to update the applications base template located at app/Resources/views/base.html.twig.

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

{# .. #}

{% block stylesheets %}
    
    {% stylesheets
        'css/*'
    %}
        
    {% endstylesheets %}
{% endblock %}

{# .. #}

JavaScripts
While we currently don’t have any JavaScipt files in our application, its usage in Assetic is much the same as using stylesheets.

{% javascripts
    '@AppBundle/Resources/public/js/*'
%}
    
{% endjavascripts %}

Filters
The real power in Assetic comes from the filters. Filters can be applied to assets or collections of assets. There are a large number of filters provided within the core of the library including the following common filters:

1 CssMinFilter: minifies CSS
2 JpegoptimFilter: optimize your JPEGs
3 Yui\CssCompressorFilter: compresses CSS using the YUI compressor
4 Yui\JsCompressorFilter: compresses JavaScript using the YUI compressor
5 CoffeeScriptFilter: compiles CoffeeScript into JavaScript

There is a full list of available filters in the Assetic Readme.

Many of these filters pass the actual task onto another program or library, such as YUI Compressor, so you may need to install/configure the appropriate libraries to use some of the filters.

Download the YUI Compressor, extract the archive and copy the file located in the build directory to app/Resources/java/yuicompressor-2.4.6.jar. This assumes you downloaded the 2.4.6 version of the YUI Compressor. If not change your version number accordingly.

Next we will configure an Assetic filter to minify the CSS using the YUI Compressor. Update the application config located at app/config/config.yml with the following.

# app/config/config.yml

# ..

assetic:
    filters:
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar

# ..

We have configured a filter called yui_css that will use the YUI Compressor Java executable we placed in the applications resources directory. In order to use the filter you need to specify which assets you want the filter applied to. Update the template located at src/AppBundle/Resources/views/layout.html.twig to apply the yui_css filter.

{# src/AppBundle/Resources/views/layout.html.twig #}

{# .. #}

{% stylesheets
    '@AppBundle/Resources/public/css/*'
    output='css/blogger.css'
    filter='yui_css'
%}
    
{% endstylesheets %}

{# .. #}

Now if you refresh the hubshark website and view the files output by Assetic you will notice they have been minified. While minification is great for production servers, it can make debugging difficult, especially when JavaScript is minified. We can disable the minification when running in the development environment by prefixing the filter with a ? as follows.

{% stylesheets
    '@AppBundle/Resources/public/css/*'
    output='css/blogger.css'
    filter='?yui_css'
%}
    
{% endstylesheets %}

Dumping the assets for production
In production we can dump the asset files using Assetic so they become actual resources on disk ready to be served by the web server. The process of creating the assets through Assetic with every page request can be quite slow, especially when filters are being applied to the assets. Dumping the assets for production ensures that Assetic is not used to serve the assets and instead the pre-processed asset files are served directly by the web server. Run the following task to create dump the asset files.

bin/console --env=prod assetic:dump

You will notice a number of CSS files were created at web/css including the combined blogger.css file. Now if you run the hubshark website in the production environment via http://hubshark.dev/ the files will be served directly from this folder.

The post Build with Symfony3 – fine tune appeared first on HubShark™.



This post first appeared on HubShark, please read the originial post: here

Share the post

Build with Symfony3 – fine tune

×

Subscribe to Hubshark

Get updates delivered right to your inbox!

Thank you for your subscription

×