Grunt workflow, problems with watch task and reloading

Question

I've been trying to get the "grunt watch" task running combined with livereload but unfortunately I'm not able to get a working solution. I've read the magento devdocs but running a combination of the various tasks does not result in a working solution.

Attempt 1: When running grunt clean and then grunt watch, changing my less files will not trigger the compilation of the less files

Attempt 2: When running grunt clean, grunt exec and then grunt watch, changing my less files will trigger the compilation of the less files, then livereload will actually reload the page but I'm still looking at the old CSS (before my less changes).

If I run a grunt clean after the above, the new css will actually become visible within the browser (after reloading manually).

my themes.js contains my own template's configuration:

allesvoorjeolie: {
      area: 'frontend',
      name: 'jpl/allesvoorjeolie',
      locale: 'en_US',
      files: [
        'css/styles-m',
        'css/styles-l'
      ],
      dsl: 'less'
    }

And the file which I'm actually changing is:

/app/design/frontend/jpl/allesvoorjeolie/web/css/source/_theme.less

Answer 1

I've had exactly the same problem.

The problem for me was that my theme name was with a capital letter, so Vendor/Theme. When grunt did everything, I've had two folders in my pub and preprocessed:

/en_US/Vendor/Theme

and

/en_US/Vendor/theme

I've changed everything to lowercase letters for the theme name, and everything works now.. As soon as grunt watch completes, my changes are visible.