Symfony Assetic config for minification via uglifyjs and uglifycss

composer.json

{
...
  "require": {
...
    "braincrafted/bootstrap-bundle": "2.1.x-dev",
    "twbs/bootstrap": "3.0.*",
    "jquery/jquery": "1.11.*"
  },
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "jquery/jquery",
        "version": "1.11.1",
        "dist": {
          "url": "http://code.jquery.com/jquery-1.11.1.js",
          "type": "file"
        }
      }
    }
  ]
} 

config.yml

# Warning: Do not copy-paste this, there is already a stub of this block at the beginning of config.yml that you should only extend
# assetic: # the lines below extend assetic block that should already exist in your config.yml
    use_controller: true
    bundles:        [ 'YourWhateverNameYouUseBundle' ]
    filters:
        uglifyjs2:
            # the path to the uglifyjs executable
            # bin: C:/Users/Standa/AppData/Roaming/npm/node_modules/uglify-js/bin/uglifyjs
            bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
        less:
            node: nodejs
            # node_paths: ["C:/Users/Standa/AppData/Roaming/npm/node_modules"] 
            node_paths: ["%kernel.root_dir%/Resources/node_modules"]
            apply_to: "\.less$"
        cssrewrite: ~
        uglifycss:
            # bin:  "C:/Users/Standa/AppData/Roaming/npm/node_modules/uglifycss/uglifycss"
            bin:  "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"

config_dev.yml

#assetic: # extend assetic: block or create it if it does not exist yet
    use_controller: true
    # or use_controller: false but then
    # you must run app/console assetic:dump --env=dev on every change
    # or run app/console assetic:watch --env=dev for file watcher

config_prod.yml

# you must run beforehand to install the assets into the web/ directory
# php app/console assets:install --env=prod
# php app/console cache:clear --no-warmup && php app/console assetic:dump --env=prod
# assetic: # extend assetic: block or create it if it does not exist yet
    use_controller: false

HelloNamePage.html.twig

{% extends '@YourWhateverNameYouUseBundle/layout.html.twig' %}
{% block body %}
<button class="btn">Hello {{ name }}!</button>

{# example: use for regular assets somewhere deep in your javascripts #}
{# assets:install --env=... has to be run beforehand #}
<script type="text/javascript" src="{{ asset('bundles/yourwhatevernameyouusebundle/js/ckeditor/ckeditor.js') }}"></script>

{% endblock body %} 

INSTALL

1. sudo apt-get install nodejs less
2. sudo npm install uglifycss --prefix app/Resources --no-bin-links
3. sudo npm install uglify-js --prefix app/Resources --no-bin-links
4. sudo npm install less --prefix app/Resources --no-bin-links
5. mind the composer.json that actually downloads jquery, bootstrap, etc. into the vendor folder, and ?uglifyjs for dev plain mode
-- these are later imported via assetic {% javascripts '@jquery' '@bootstrap_js' filter="?uglifyjs2" output="js/*.js"%}

Comments and imporovement suggestions welcome!

Troubleshooting:

1. php app\console ca:cl --env=dev && php app\console ca:cl --env=prod
2. minification only happens in prod (the ? in filter="?uglifyjs")
3. rm -Rf app/cache/
4. assetic: block in config(|_dev|_prod).yml files must exist only once (the next ones are ignored)
5. `node --version` outputs something?
6. `node app/Resources/node_modules/uglify-js/bin/uglifyjs --help` outputs something?
7. `node app/Resources/node_modules/uglifycss/uglifycss --help` outputs something?
8. CSS minification can only be done from web/bundles/somethingbundle/ (do not use @SomethingBundle)
9. try one source file to one target file minification, ie. {% javascripts '@YourWhateverNameYouUseBundle/Resources/public/js/jquery.dataTables.js' filter="?uglifyjs2" output="js/datatable.js" %}
10. if /app_dev.php pages load slowly, set assetic.use_controller: false in config_dev.yml and use `php app/console assetic:watch` for interactive work with assets or `php app/console assetic:dump --env=dev` to simply dump them 

layout.html.twig

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Bootstrap 101 Template{% endblock title %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    {#<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" media="screen">#}

    {# mind the ?uglifycss - ? = do not minify for dev, even mix less and css into one output file #}
    {% stylesheets 
                '@bootstrap_css' 
                'bundles/mybundle/styles.less'
                filter="cssrewrite" 
                filter="?uglifycss" 
    %}
    <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}

    {% block stylesheets %}{% endblock stylesheets %}

    <!-- HTML5 Shim and Respond.js add IE8 support of HTML5 elements and media queries -->
    {% include 'BraincraftedBootstrapBundle::ie8-support.html.twig' %}

</head>

<body>
{% block body %}
<h1>Hello, world!</h1>
{% endblock body %}

{# example: loading jquery and bootstrap required in composer.json #}
{# mind ?uglifyjs2 - ? = do not minify for dev #}
{% javascripts '@jquery' '@bootstrap_js' filter="?uglifyjs2" output="js/*.js"%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

{# Example with loading of datatable.js related scripts #}
{# mind the output="js/datatable.js" -- not js/*.js which sometimes does not work #}
{% javascripts '@YourWhateverNameYouUseBundle/Resources/public/js/jquery.dataTables.min.js'
        '@YourWhateverNameYouUseBundle/Resources/public/js/jquery.dataTables.bootstrap.js'
        '@YourWhateverNameYouUseBundle/Resources/public/js/jquery.dataTables.columnFilter.js'
        '@YourWhateverNameYouUseBundle/Resources/public/js/datedatatable.js' 
        filter="?uglifyjs2" 
        output="js/datatable.js" 
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

{% block javascripts %}{% endblock javascripts %}

</body>
</html>

It works!! 😊