3

I am using wro4j to minify static content. However, when I am in my development environment I would like to use the uncompressed versions of my JS and CSS files.

To put it into context, I am using Spring Boot and Thymeleaf.

This code does not work inside the <head></head> of my HTML:

<th:block th:if="${@environment.getActiveProfiles()[0] != 'development'}">
    <link th:href="@{/wro4j/compressed.css}" rel="stylesheet"></link>
</th:block>
<th:block th:if="${@environment.getActiveProfiles()[0] == 'development'}">
    <link th:href="@{/css/uncompressed.css}" rel="stylesheet"></link>
</th:block>

What I see from the code above in the source of my HTML is:

<link rel="stylesheet" href="/wro4j/compressed.css" />

<link rel="stylesheet" href="/css/uncompressed.css" />

Surely the only css that should be included is uncompressed.css as I have set my profile to be development in 'application.yml'.

However if I were to do something like the following in the <body></body> it would work perfectly as I expect:

<th:block th:if="${@environment.getActiveProfiles()[0] == 'development'}">
    <div th:text="${@environment.getActiveProfiles()[0]}"></div>
</th:block>
<th:block th:if="${@environment.getActiveProfiles()[0] != 'development'}">
    <div th:text="'WHAT THE HECK!' + ${@environment.getActiveProfiles()[0]"></div>
</th:block>

Having set my spring profile to development in application.yml, what I would expect to see from the latter block is "development" and not "WHAT THE HECK! development" and that is exactly what I see. So why is the same code not behaving as I expect in the head section of my HTML.

What am I missing?

Hamster
  • 680
  • 7
  • 23
  • 3
    See [this bug](https://github.com/thymeleaf/thymeleaf/issues/246). You can simply use `th:if` on the `link` directly, and use `th:unless` on the other one. – Boris the Spider Jun 01 '16 at 08:01
  • @BoristheSpider You should post this as a solution so it can be accpeted – Matthew Fontana Jun 01 '16 at 11:58
  • @hamster An alternate option to changing the filename for dev & production would be to build the files differently based on environment. Tools such as Gulp or Webpack work great. They can be integrated into Maven & Gradle projects as well. A little bit beyond the scope of this question, but I thought I'd mention it anyway. – Kyle Anderson Jun 01 '16 at 21:24

1 Answers1

1

Thanks to @Boris's comment on my question, the solution is to use Thymeleaf version 3. However as a workaround this is what I have done for the time being:

<link th:if="${@environment.getActiveProfiles()[0] != 'development'}"  th:href="@{/wro4j/all.css}" rel="stylesheet" />

<script  th:if="${@environment.getActiveProfiles()[0] == 'development'}" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
Hamster
  • 680
  • 7
  • 23