watch, reload only modified file (dev)

[jdeniau]

Hi,

I have an improvement proposition. It is not really easy, so I open an issue instead of a PR.

Let's imagine this gassetic.yml file

mimtypes:
    css:
        dev:
            tasks:
                - less
        prod:
            tasks:
                - less
                - concat
        files:
            global.css:
                - "a.css"
                - "b.css"

If I update the a.css file, the b.css file is reloaded too instead of reloading only a.css

Of course, with 2 files, we don't really care, but in my project our have, we have 33 css files in the global.css. Do you thing it could be something doable to only update the wanted file ?

Thanks

[romanschejbal]

Oh yeah, this one's already started getting on my back too... I'll look into it when I have more time. Stay tuned! :+1:

[jdeniau]

Ok great !

By the way, I just understand that the watch option is useless. If you can update the README to explain the default behavior, it will be nice.

[romanschejbal]

Its not useless, we use it for less. Imagine this config:

css:
  dev:
    ...
  files:
    crowdreactive.css:
      - assets/less/crowdreactive.less

But the less file content looks like this

@import('../../vendor/bootstrap/bootstrap');
@import('./slideshow');
@import('./homepage');

So gassetic would only watch the specified file in the config, but we also want to watch the rest of the files and reload the compiled css once changed. So the gassetic deals with this by specifing the watch files:

css:
  dev:
    ...
  files:
    crowdreactive.css:
      - assets/less/crowdreactive.less
  watch: 
    - assets/**/*.less

See?

[jdeniau]

Yeah that's great ! I didn't tried that ;)

The documentation should explain this so.

I tried it, now, and got another suggestion :) Is there a way not to choose between the two functionality ?

In your example, if you change the crowdreactive.less file, and if you tell to watch vendor/bootstrap/bootstrap for example, it will not regenerate the files.

[romanschejbal]

I am not sure I get it... Why would you want to watch the bootstrap since its a third party? Also, the watch property in the config is an array, so you can add as many paths you like and it will automatically call the build. Or you can put there an empty array to disable watching for that particular mimetype. Did I answer your question?

[jdeniau]

I will come back to the first example to make it simple.

mimtypes:
    css:
        dev:
            tasks:
                - less
        prod:
            tasks:
                - less
                - concat
        files:
            global.css:
                - "a.less"
                - "b.less"

/* a.less */
@import('variables.less')

body { background: @bg;}

/* variables.less */
@bg: #ff0000;

If I do not add a watch property, only the a.less and b.less files are watched automatically. The idea there is to only add a watch: [variables.less]. This way, if a.less is modified, only the global.css/a.css will be updated, but if the variables.less is modified, there all files are updated (global.css and everyone).

[romanschejbal]

If you add a watch for variables.less, then it'll watch only that single file, not those specified in the mimetype above. Its more like overriding the watch for a particular mimetype build instead of adding another watch. ;)

But yes, there is an issue about running tasks on all files in dev mode, even when you change only one... Its not that easy to handle that currently, but I will think about it.