TechQA.

Disable combining and minifying assets in Symfony with Assetic

2.5k views Asked by At

With the following config, my css and javascript files get to the browser minified and combined, even in dev environment (which is the one I currently use).

How can I have Assetic neither combine nor minify those files in dev environment?

app/config/config/yml

assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
    filters:
        cssrewrite: ~
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        less:
            node: %less_node_bin%
            node_paths: [%less_node_modules%]
            apply_to: ".less$"
    assets:
        main_css:
            inputs:
                - %kernel.root_dir%/../web/css/file01.css
                - %kernel.root_dir%/../web/css/file02.css
                - %kernel.root_dir%/../web/css/file03.css
            output: css/main.css
            filter:
                - yui_css
                - less
        other_css:
            inputs:
                - %kernel.root_dir%/../web/css/file04.css
                - %kernel.root_dir%/../web/css/file05.css
                - %kernel.root_dir%/../web/css/file06.css
            output: css/other.css
            filter:
                - yui_css
                - less
        other_js:
            inputs:
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
            output: js/other.js
            filter:
                - yui_js
        main_js:
            inputs:
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
            output: js/main.js
            filter:
                - yui_js

app/config/config_dev.yml

assetic:
    debug:          %kernel.debug%
    use_controller: true
    bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
    filters:
        cssrewrite: ~
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    assets:

twig template:

<head>
    <meta charset="utf-8">
    <title>My title</title>
    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('css/main.css') }}">
    {% endblock %}
    {% block javascripts %}
        <script src="{{ asset('js/main.js') }}"></script>
    {% endblock %}
    <!--
    Also tried this type of block, without success:
    {% block javascripts %}
        {% javascripts '@main_js' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}
    -->
</head>
symfony assetic
Original Q&A
3

There are 3 answers

4
Artyom Kozhemiakin On BEST ANSWER

The thing is "config.yml" file is always used in all environments. For example, in the dev enviroment "config.yml" and "config_dev.yml" files are merged to form the final config.

For example we have config.yml file with this:

foo:
    bar: baz

And we have config_dev.yml with something like this:

foo:
    go: run

The final config will have

foo:
    bar: baz
    go: run

You see the problem? Yo need to place prod specific configuration parameters (that you wish to use only in prod environment, like js minifiers in your case) not in the config.yml file, but in the config_prod.yml file.

So you should have something like this in your config.yml:

assetic:
    assets:
        my_js_asset:
            inputs:
                ...

And something like this in your config_prod.yml file

assetic:
    assets:
        my_js_asset:
            filters: [yui_js]
            output:  scripts.min.js

EDIT 1:

However, this will fix only the minification (and other possible filters) issue.

Maybe I'm wrong, but, as far as I know, right now it is not possible to separate various input files defined within the same named asset. The logic behind this lies in the assetic implementation of the corresponding twig tags (nodes), because the separate files them self are generated and can be found in the target directory after executing assetic:dump command in the dev environment (Or if the stylesheets\javascripts twig tag`s parameter "combine" attribute is set to true). If you want to inspect this and better understand the implementation, this is a good starting point: https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Extension/Twig/AsseticNode.php

3
Yassine Guedidi On
  • You don't need to override all the config in config_dev.yml, just override the use_controller option is enough.
  • In your template, use the commented one. The current one will use the dumped asset, so if you already dump them minified, it will be always used, it will never use the Assetic controller.
  • In config.yml, as the doc says, you should use - ?yui_css instead of - yui_css, note the leading question mark (same with yui_js). Then these filters will not be used in debug mode (in dev env)
0
Javier Eguiluz On

My recommendation is to simplify the config.yml as follows:

assetic:
debug:          %kernel.debug%
use_controller: %kernel.debug%
bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
filters:
    cssrewrite: ~
    yui_css:
        jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    yui_js:
        jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    less:
        node: %less_node_bin%
        node_paths: [%less_node_modules%]
        apply_to: ".less$"

And then, configure the CSS and JS files in the layout template itself:

<head>
    <meta charset="utf-8">
    <title>My title</title>

    {% stylesheets 'css/file01.css' 'css/file02.css' 'css/file03.css'
        filter='?yui_css, less' output='css/main.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

    {% stylesheets 'css/file04.css' 'css/file05.css' 'css/file06.css'
        filter='?yui_css, less' output='css/other.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

    {% javascripts
        '@FirstBundle/Resources/public/js/thirdparty/file01.js'
        '@FirstBundle/Resources/public/js/thirdparty/file02.js'
        '@FirstBundle/Resources/public/js/thirdparty/file03.js'
        filter='?yui_js' output='js/other.js' %}
         <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {% javascripts
        '@FirstBundle/Resources/public/js/thirdparty/file04.js'
        '@FirstBundle/Resources/public/js/thirdparty/file05.js'
        '@FirstBundle/Resources/public/js/thirdparty/file06.js'
        filter='?yui_js' output='js/main.js' %}
         <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
</head>

Related Questions in SYMFONY

Related Questions in ASSETIC

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions