BrowserSync reloads browsers before task has finished when using Grunt

Question

I have the following configuration for BrowserSync task:

"dev": {
    "files": [
        {
            "expand": true,
            "cwd": "<%= paths.src %>",
            "src": "**/*"
        }
    ],
    "options": {
        "watchTask": true,
        "proxy": "<%= site.host %>",
        "injectChanges": true,
        "notify": {
            "styles": {
                "top": "auto",
                "bottom": "0"
            }
        }
    }
},

When I save some change to a file the reloading browser task is fired before the actual change has been done. See the screenshot.

Answer 1

I figured it out. You have just change 'files' property in JSON with 'bsFiles' and listen to changes in compiled files:

 "bsFiles": {
        "src": [
            "<%= paths.dest %>**/*",
            "<%= paths.twigs %>**/*"
        ]
    },