Running gulp.watch server-side causes changed files to miss in the results

Question

I use Gulp (3.8.11) to render SASS and JavaScript. It runs servers-side on Ubuntu 14.04.2 LTS next to Apache2, PHP and MySQL.

Every time I change a file (remotely via SSHFS using Sublime Text 2), gulp.watch kicks off the specified task. In the result however there is a 50% chance that the changed file is missing (for both tasks SASS and JS).

When I run gulp manually (not using gulp.watch) I get the expected result. Running gulp.watch with the same project locally, everything works fine.

There is no error message, just an incomplete rendered JS or CSS file that looks amazing in the browser. It's frustrating.

Edit: Following changes to the watch task solved the problem.

var path = {
    js: [
        'src/js/*.js',
        'src/js/*/*.js',
        'src/js/*/*/*.js'
    ],
    sass: [
        'src/sass/reset.scss',
        'src/sass/constant.scss',
        'src/sass/base.scss',
        'src/sass/*.scss'
    ]
};

gulp.task('watch', function() {
    livereload.listen();

    gulp.watch(path.js, function() {
        setTimeout(function () {
            gulp.start('js');
        }, 100);
    });

    gulp.watch(path.sass, function() {
        setTimeout(function () {
            gulp.start('sass');
        }, 100);
    });
});

Answer 1

Write delay of SSHFS probably.

So you might want to wrap the code execution in a Timeout to work around this problem

Edited: As Commented by Null Pointer exception, i clarify my answer:

Over SSHFS there is a write delay of the acutal content of the file. So the watch might be triggered before the content is actually written to the file on the server. So the changes might not be included in the run of the task.

To work around this delay a timeout in the gulp task can increase the chances that the task is executed after the content has been written to the file.

More details here https://github.com/floatdrop/gulp-watch/issues/22