magento-cache-clean icon indicating copy to clipboard operation
magento-cache-clean copied to clipboard

Automatically clean static content css files when source less files change

Open Vinai opened this issue 6 years ago • 15 comments

Implement cleaning of specific static content when files are changed.

First, .less file changes can trigger removal of the obsolete copy of the .less file in var/view_preprocessed and the generated .css files in pub/static.

The second type of static files that could automatically be removed when a file is changed are the js-translation.json files. The browser local storage still would need to be cleaned manually, but at least the server side would be taken care of automatically.

Related: Issue #15.

Vinai avatar Oct 25 '18 07:10 Vinai

On second thought, automatically cleaning .css files on .less changes maybe isn't such a good idea, since most developers use gulp or grunt or whatever to recompile those, instead of the bundled PHP compiler. For the js-translation.json files however it makes sense to clean them automatically though.

Vinai avatar Oct 25 '18 07:10 Vinai

How about a --watch-less parameter? Or just --less so everyone could decide to watch them or not?

DanieliMi avatar Oct 25 '18 10:10 DanieliMi

I like having the option, and I also think that all static content should cleared from pub/static and var/view_preprocessed. This would solve issues that I've been having with CSS, JS and UI template HTML changes not showing up immediately.

JosephLeedy avatar Jan 17 '19 17:01 JosephLeedy

Why not comparing the mtime of the files and only delete the static ones if they are older than the source files?

stollr avatar Feb 18 '20 07:02 stollr

In case of LESS it's not straight forward to map static files to source files. For requirejs-config.js, images and JS files the mapping straight forward, but also not useful, as they are handled already in developer mode.

Vinai avatar Feb 18 '20 08:02 Vinai

@JosephLeedy JS and UI template changes not showing up immediately usually is related to the browser cache being active.

Vinai avatar Feb 18 '20 08:02 Vinai

Since quite a few 👍 have been added to this issue, I think it's time to implement it with a command line switch to turn it on.

Vinai avatar Oct 16 '20 08:10 Vinai

I must admit that I have been quite successfully in avoiding frontend related work that involves theming…

Maybe someone who has some more experience can help me out.

Is there a way to know easily which .css files are affected by changes in a .less file?

Vinai avatar Oct 16 '20 09:10 Vinai

After some discussion, it seems the answer is that the only way to know that would be to do static analysis to build the import tree, and I don't want to that. Deleting all .css files whenever any .less file is changes seems to be "good enough".

Vinai avatar Oct 16 '20 09:10 Vinai

Thoughts on naming: ideally the name for the command line switch could cover more static assets than just .less files in future, but to be honest, that probably won't happen. Probably nobody but me cares, but if someone has preferences I would appreciate feedback :) Possible names for the switch:

  • --watch-less
  • --less
  • --watch-static
  • --static
  • --css (this would allow for watching .sass etc in addition to .less)

Vinai avatar Oct 16 '20 09:10 Vinai

I think that “—watch-less” would suffice.

JosephLeedy avatar Oct 16 '20 11:10 JosephLeedy

If the only option is to delete all *.css files I think it still helps people who do not use the grunt process. Still it's painfully slow as the php less compiler is not very performant.

If it doesn't take too much time to implement a POC I'd say: go for it and we'll test.

riconeitzel avatar Dec 17 '20 10:12 riconeitzel

I was just looking for this one as well. I'm quite happy with cache-clean.js --watch and the [F]rontend hotkey, but it would be awesome if it could be tracked automatically.

But it should be possible to enable it manually like already discussed here.

--watch --static-frontend or as alias --watch-static-frontend (watch + static frontend) Could make sense if you're able to run --watch and --static-frontend independently.

Same applies for less, css, or whatever. Since I'm currently flushing static content area for frontend I choosed that name. 🙂

Morgy93 avatar Jun 22 '21 19:06 Morgy93

Hi @Vinai, is there any news about this feature?

DanieliMi avatar Oct 06 '21 08:10 DanieliMi

@DanieliMi No news currently. Since Luma is dying and neither Hyvä nor any of the other alternatives require less file compilation, I don't really feel like putting time into this.

Vinai avatar Dec 08 '21 17:12 Vinai