[SOLVED] Using different public ressources for prod/test/dev context

Using Neos & Flow
1

I’d like to optimize my production site so that for instance css-files are load-time-optimized (reduced to one file, unused rules removed, …) In order to transform those css files from Sass to production level I use a number of gulp transformations.

It would be great, if I could have in my templates a condition, that renders different links to css and js reccources.

On dev I would like to see rather the unmerged files to efficiently identify where some problem occurs.

On test and dev I would like to have the merged/optmized files linked.

How could this be done?

2

You could use https://github.com/jonnitto/Carbon.IncludeAssets/#readme:

  • Put it in your site package composer as a dependency.
  • Create the files
  • Configuration/Production/Settings.yaml
  • Configuration/Test/Settings.yaml
  • Configuration/Development/Settings.yaml.
  • In these files, you can set the configuration.

[details=Example for Production]```
Carbon:
IncludeAssets:
General:
Head:
- GeneralHead.min.css
- AboveTheFold.min.css[inline]
- GeneralHead.min.js[async defer]
Body:
- GeneralBody.min.js[async defer]
- AdditionSpecialFancyTracking.min.js[inline]


[details=Example for Development]```
Carbon:
    IncludeAssets:
    General:
      Head:
        - GeneralHead.debug.css
        - AboveTheFold.debug.css[inline]
        - GeneralHead.debug.js[async defer]
      Body:
        - GeneralBody.debug.js[async defer]
        - AdditionSpecialFancyTracking.debug.js[inline]
```[/details]

**But**

I would include Sourcemaps to your build pipleline. Like that you'll see in which file the error happen. And if you use something like https://rollbar.com/ you get even on Production pages good error reports…
3

Thanks a lot for the hint!

Looks like Carbon.IncludeAssets will do the trick for me. It also nicely includes a cache-buster to those ressource files.