Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp src returns empty file

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.

like image 630
user3360496 Avatar asked Feb 27 '14 12:02

user3360496


1 Answers

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);
    });
like image 164
user3360496 Avatar answered Oct 23 '22 03:10

user3360496