How to disable assets combining on development in OctoberCMS

- 1 answer

Ad

October CMS offers handy functionality to combine js/css assets. In my layouts/default.htm I have scripts defined like that:

<script src="{{ [
    'assets/javascript/jquery.js',
    'assets/vendor/bootstrap/js/transition.js',
    'assets/vendor/bootstrap/js/alert.js',
    'assets/vendor/bootstrap/js/button.js',
    'assets/vendor/bootstrap/js/carousel.js',
    'assets/vendor/bootstrap/js/collapse.js',
    'assets/vendor/bootstrap/js/dropdown.js',
    'assets/vendor/bootstrap/js/modal.js',
    'assets/vendor/bootstrap/js/tooltip.js',
    'assets/vendor/bootstrap/js/popover.js',
    'assets/vendor/bootstrap/js/scrollspy.js',
    'assets/vendor/bootstrap/js/tab.js',
    'assets/vendor/bootstrap/js/affix.js',
    'assets/javascript/app.js',
    '@framework',
    '@framework.extras'
]|theme }}"></script>
{% scripts %}

In the config/cms.php file I have:

'enableAssetCache' => false,
'enableAssetMinify' => null,

And in the config/app.php:

'debug' => true,

This results in the combining of all scripts defined in the twig array. On the rendered website I get one javascript file

<script src="http://localhost/Test/october/combine/2cdc17b704821cd2ffbd9be8e4d340f9-1457016128"></script>

I would like to have an option to NOT combine my assets as long as the 'debug' => true is enabled in config/app.php (so in the development environment).

I know that I can have my assets served separately by October CMS if I add them to my layout in separate script tags. But this would serve them separately on production as well. Example:

<script src="{{ 'assets/js/one.js'|theme }}"></script>
<script src="{{ 'assets/js/two.js'|theme }}"></script>

I have found this 1.5 year old issue on github with no useful answer: https://github.com/octobercms/october/issues/289

And documentation also says nothing useful about this matter: https://octobercms.com/docs/markup/filter-theme

Do you have any idea how to deal with this? I have though maybe that I can create a plugin in OctoberCMS, which will inject assets to the layout depending on the config setting (debug true/false). But as far as I know injecting assets from within the plugin, require to have the assets in the plugin directory and not theme directory.

Ad

Answer

Ad

OK I managed to work this out but not with the config/app.php mentioned in the question.

Other solution requires to create .env file in the root directory of OctoberCMS. This file is by default in the .gitignore so you can have different .env files on production and development (Piece of documentation)

Contents of this file should be:

APP_ENV=dev

Then you can access variable in the twig:

{% if this.environment == 'dev' %}
    <script src="{{ 'assets/vendor/jquery.min.js'|theme }}"></script>
    <script src="{{ 'assets/semantic/dist/semantic.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/app.js' | theme }}"></script>
    {% framework extras %}
{% else %}
    <script src="{{ [
     'assets/vendor/jquery.js',
     'assets/semantic/dist/semantic.js',
     'assets/javascript/app.js',
     '@framework',
     '@framework.extras'
     ]|theme }}"></script>
{% endif %}
Ad
source: stackoverflow.com
Ad