Add Vinyl FTP deploy to an existing gulp watch workflow

Question

I have little experience with Gulp and just want to be able to automatically upload my css file immediately after Gulp has created it from my SASS files through gulp watch:css

I've tried adding the 'deploy' task into the gulp watch:css task, but I cannot get the deploy task to run AFTER the CSS file is created. It always runs before.

Here's the relevant code where I have tried to add 'deploy' to the gulp watch:css task...

gulp.task('watch:css', ['styles', 'deploy'], function() {
  return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['styles', 'deploy']);
});

gulp.task('styles', ['clean:css'], function() {
  return gulp.src(sassFiles)
    .pipe($.sourcemaps.init())
    .pipe(sass(options.sass).on('error', sass.logError))
    .pipe($.autoprefixer(options.autoprefixer))
    .pipe($.size({showFiles: true}))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(options.theme.css))
    .pipe($.if(browserSync.active, browserSync.stream({match: '**/*.css'})))
});

var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

gulp.task( 'deploy', function () {

    var conn = ftp.create( {
        host:     'xxx.com',
        user:     'xxx',
        password: 'xxx',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = [
      'css/styles.css'
    ];

    // 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( '/' ) ) // only upload newer files 
        .pipe( conn.dest( '/' ) );

} );

Possible duplicate of [How to run Gulp tasks sequentially one after the other](http://stackoverflow.com/questions/22824546/how-to-run-gulp-tasks-sequentially-one-after-the-other) — Sven Schoenung, Nov 15 '16 at 09:24
I can't tell from that how to run a Gulp task like watch:css that is always checking for changes and then adding the deploy task to run after watch:css every time. I can get deploy to run after watch:css one time, but not every time I make a SASS change — arrr_matey, Nov 15 '16 at 10:21
The linked answers tell you how to make a task that runs stuff in sequence. The only thing they don't tell you is to call that task from your watch, but that should be obvious. — Sven Schoenung, Nov 15 '16 at 10:36
not obvious. very, very new to gulp and this is really the only thing I need to modify — arrr_matey, Nov 15 '16 at 11:02

score 0 · Accepted Answer · answered Nov 15 '16 at 11:23

Figured it out...

the 'watch:css' task calls my 'deploy' task instead of 'styles':

gulp.task('watch:css', ['deploy'], function() {
  return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['deploy']);
});

the 'styles' task remains as is

the 'deploy' task takes the 'styles' task as a dependency like this

gulp.task( 'deploy', ['styles'], function () {

Now when running 'gulp watch:css' it triggers the 'deploy' function on every change to my SASS files, which in turn triggers the 'styles' function that compiles my CSS.

Add Vinyl FTP deploy to an existing gulp watch workflow

1 Answers1