Gulp upload ftp after watch finished - ftp

Question

Here's my gulp file. It should compile scss and upload file after change. It uploads, but not always. What am I doing wrong?
var gulp = require('gulp'),
watch = require('gulp-watch'),
gutil = require( 'gulp-util' ),
sass = require('gulp-sass'),
ftp = require( 'vinyl-ftp' );
gulp.task( 'deploy', function () {
var conn = ftp.create( {
host: 'host',
user: 'user#host',
password: 'pass',
parallel: 10,
log: gutil.log
} );
var globs = [
'src/**',
'css/**',
'build/**',
'js/**',
'fonts/**',
'index.html'
];
// using base = '.' will transfer everything to /public_html correctly
// turn off buffering in gulp.src for best performance
return gulp.src( globs, { base: '.', buffer: false } )
.pipe( conn.newer( '/test' ) ) // only upload newer files
.pipe( conn.dest( '/test' ) );
} );
gulp.task('css', function () {
return gulp.src('scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css'))
});
gulp.task('watch', function (){
gulp.watch('scss/**/*.scss', ['css', 'deploy']);
});

Answer 1

This line doesn't do what you think it does:
gulp.watch('scss/**/*.scss', ['css', 'deploy']);
This does not run the css task followed by the deploy task. Gulp executes all tasks with maximum concurrency unless you tell it otherwise.
That means your css and deploy tasks both start running immediately whenever a .scss file is changed. Depending on whether your css task finishes compiling your .scss files before your deploy task starts transmitting them, this might work or it might not.
You need to tell gulp to execute the deploy task only after the css task has finished:
gulp.task( 'deploy', ['css'], function () {
//...
});