8

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.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
user3360496
  • 357
  • 2
  • 7
  • Welcome to StackOverflow! I would recommend to post it as an answer an accept later your own answer, so other people can know how to solve this problem of the question easily – llrs Feb 27 '14 at 14:35

1 Answers1

17

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);
    });
user3360496
  • 357
  • 2
  • 7
  • This doesn't seem ideal, but it sovled my problem. Thanks! I had to use a higher number for it to work consistently, but now I have to always wait that minimum time. – Andy Fleming Mar 06 '14 at 19:56
  • This solved my problem, too. However, I believe there is a better solution. – Link Oct 10 '15 at 03:22