如何从本地到实时网站（服务器）同步gulp

Question

Gulp设置在我当地工作正常。

但我想如果我在本地更改文件，那么它将自动构建并上传到实时服务器（缩小的css和js /编译的css / js）。

我已尝试gulp-rsync，vinyl-ftp但未成功可能我不知道如何使用上述套餐。

这是我的gulp文件。

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var browserSync = require('browser-sync');
    var useref = require('gulp-useref');
    var uglify = require('gulp-uglify');
    var gulpIf = require('gulp-if');
    var cssnano = require('gulp-cssnano');
    var imagemin = require('gulp-imagemin');
    var cache = require('gulp-cache');
    var del = require('del');
    var runSequence = require('run-sequence');

    // Development Tasks 
    // -----------------

    // Start browserSync server
    gulp.task('browserSync', function() {
      browserSync({
        server: {
          baseDir: 'app'
        }
      })
    })

    gulp.task('sass', function() {
      return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
        .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
        .pipe(gulp.dest('app/css')) // Outputs it in the css folder
        .pipe(browserSync.reload({ // Reloading with Browser Sync
          stream: true
        }));
    })

    // Watchers
    gulp.task('watch', function() {
      gulp.watch('app/scss/**/*.scss', ['sass']);
      gulp.watch('app/*.html', browserSync.reload);
      gulp.watch('app/js/**/*.js', browserSync.reload);
    })

    // Optimization Tasks 
    // ------------------

    // Optimizing CSS and JavaScript 
    gulp.task('useref', function() {

      return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'));
    });

    // Optimizing Images 
    gulp.task('images', function() {
      return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
          interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
    });

    // Copying fonts 
    gulp.task('fonts', function() {
      return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('dist/fonts'))
    })

    // Cleaning 
    gulp.task('clean', function() {
      return del.sync('dist').then(function(cb) {
        return cache.clearAll(cb);
      });
    })

    gulp.task('clean:dist', function() {
      return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
    });

    // Build Sequences
    // ---------------

    gulp.task('default', function(callback) {
      runSequence(['sass', 'browserSync'], 'watch',
        callback
      )
    })

    gulp.task('build', function(callback) {
      runSequence(
        'clean:dist',
        'sass',
        ['useref', 'images', 'fonts'],
        callback
      )
    })

这是我的文件夹结构。

这是主文件夹

这是一个开发文件夹

这个是生成文件夹，其中构建了所有文件。