Gulp src returns empty file

Question

I'm trying to create Gulp task for sass/js compilation and I've also included code for live reload. It works fine except that sometimes gulp.src throws empty files into the pipe when I edit them.

var gulp = require('gulp');

var sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    debug = require('gulp-debug'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr(),
    spawn = require('child_process').spawn,
    node;


gulp.task('server', function() {
    if (node) node.kill();

    node = spawn('node', ['./index.js'], {stdio: 'inherit'});

    node.on('close', function (code) {
        if (code === 8) {
            gulp.log('Error detected, waiting for changes...');
        }
    });
});


gulp.task('html', function() {
    return gulp.src('./src/*.html')
        .pipe(gulp.dest('./build'))
        .pipe(livereload(server));
});


gulp.task('js', function() {
    return gulp.src(['./src/js/*.js'], { base: './' })

When files are saved debug is checking the gulp.src output and most of the time it shows files with proper content but from time to time those files are empty.

        .pipe(debug())
        .pipe(concat("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest('./build/js'))
        .pipe(livereload(server));
});


gulp.task('scss', function() {
    return gulp.src('./src/scss/*.scss')
        .pipe(sass())
        .pipe(concat("all.css"))
        .pipe(gulp.dest('./build/css/'))
        .pipe(livereload(server));
});


gulp.task('listen', function(next) {
    server.listen(35729, function(err) {
        if (err) return console.error(err);
        next();
    });
});


gulp.task('clean', function(){
    return gulp.src(['./build/*'], {read:false})
        .pipe(clean());
});


gulp.task('watch', function() {
    gulp.watch('./src/*.html', ['html']);
    gulp.watch('./src/scss/*.scss', ['scss']);
    gulp.watch('./src/js/*.js', ['js']);
    gulp.watch('./index.js', ['server']);
});


gulp.task('default', ['clean', 'html', 'scss', 'js', 'listen', 'server', 'watch'], function () {

});

I'm not sure how to fix that. When I run gulp it always works initially but later when gulp.watch sees changes the problem appears.

It looks like files end up being empty when I save them using sftp package in Sublime Text. Its very strange because saving with Vim remotely always works well.

Answer 1

I'm not sure if is is the way to go but it seems that SFTP in Sublime needs more time to update file on the server. Gulp.watch triggers the gulp task even when the file is not ready. After adding the setTimeout() to gulp.watch process it is working every time i save now.

gulp.watch('./src/js/*.js', function() {
        setTimeout(function () {
            gulp.start('js');
        }, 300);
    });