Problems minifying/aggregating CSS/JS files with Symfony 2.5 and UglifyCSS/JS

Question

I have followed these instructions in order to enable both UglifyJs2 and UglifyCss on my development environment (to start with... can't risk taking down the production server with this problem!)

Under my config_dev.yml I have configured the following (I've started with just the bin parameters but added extra configurations just in case something else was causing a problem.)

assetic:
    use_controller: %use_assetic_controller%
    filters:
        uglifycss:
            bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifycss"
            node: /usr/local/bin/node
            apply_to: '\.css$'
        uglifyjs2:
            bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifyjs"
            node: /usr/local/bin/node
            apply_to: '\.js$'

and in my base.html.twig file:

  {% javascripts  'bundles/fosjsrouting/js/router.js'
                  'bundles/legalcheck/js/angular.min.js'
                  'bundles/legalcheck/js/plugins/*'
                  'bundles/legalcheck/js/app.js'
                  'bundles/legalcheck/js/controllers/*'
                  filter='uglifyjs2'
                %}
      <script type="text/javascript" src="{{ asset_url }}"></script>
  {% endjavascripts %}

and

  {% stylesheets 'bundles/legalcheck/css/*' filter='cssrewrite' filter='uglifycss' %}
  <link rel="stylesheet" href="{{ asset_url }}" />
  {% endstylesheets %}

When I run php app/console assetic:dump --env=prod --verbose, all files are generated with no errors. They're even minified at this point!

However, when I load the app in the browser, all of the CSS and JS assets return a 500 error.

Here's what each Javascript file returns, along with what each CSS file returns. I am getting a signal "5" error from what seems like both UglifyJS and/or UglifyCSS, or Node itself. I suspect the wrong thing is being sent somewhere.

Any ideas? I'm running a local MAMP server to achieve a development environment. Also note I've taken the space out of "Git Repos" in my path to avoid obvious problems like path issues as a troubleshooting step.

Update

I tried running the same settings in config_dev.yml into my config_prod.yml and found that everything works perfectly on the production side. It seems that trying to load the minified assets through app_dev.php causes problems... but I still don't know what! It would be nice if minification could be tested through the dev environment, which is why I'm leaving the question open for both this problem and to encourage dialogue for a solution.

Answer 1

assetic's debug mode :)

you're dumping the files with --prod ( which has debug mode disabled by default) ...

... and try to access them in the dev environment afterwards.

If debug mode is enabled asset collections will be split into multiple files that look like this:

<hash>_partX_<filename>.js

This is what chrome devtools shows you and a problem while dumping on-the-fly leads to the 500 errors.

You didn't dump these files for debugging with the command you invoked and (as long as you don't have use_controller: true) they won't be dumped on the fly either.

If you have use_controller: true ... any non-zero exit code of a filter-run will result in a 500 error. That's what you experience.

---

solution:

Either disable debug mode for a single asset collection like this ...

{% javascripts  '...'
    filter='uglifyjs2'
    debug=false
 %}

... or add ...

assetic:
  debug: false

to your config_dev.yml to resolve the issue.

Finally dump your assets with app/console assetic:dump and the correct environment flag.