将 Vinyl FTP 部署添加到现有的 gulp watch 工作流程答案

【问题标题】：Add Vinyl FTP deploy to an existing gulp watch workflow将 Vinyl FTP 部署添加到现有的 gulp watch 工作流程
【发布时间】：2016-11-15 08:56:45
【问题描述】：

我对 Gulp 几乎没有经验，只是希望能够在 Gulp 通过 gulp watch:css 从我的 SASS 文件创建 css 文件后立即自动上传它

我尝试将“部署”任务添加到 gulp watch:css 任务中，但在创建 CSS 文件后我无法让部署任务运行。它总是在之前运行。

这是我尝试将“部署”添加到 gulp watch:css 任务的相关代码...

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( '/' ) );

} );

【问题讨论】：

How to run Gulp tasks sequentially one after the other的可能重复
我不知道如何运行像 watch:css 这样的 Gulp 任务，它总是检查更改，然后每次都添加部署任务以在 watch:css 之后运行。我可以让 deploy 在 watch:css 之后运行一次，但不是每次我进行 SASS 更改时
链接的答案告诉你如何制作一个按顺序运行的任务。他们唯一没有告诉您的是从您的手表调用该任务，但这应该很明显。
不明显。对 gulp 来说非常非常新，这真的是我唯一需要修改的地方

标签： gulp vinyl-ftp

【解决方案1】：

想通了……

“watch:css”任务调用我的“部署”任务而不是“样式”：

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

“样式”任务保持原样

“部署”任务将“样式”任务作为这样的依赖项

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

现在，当运行“gulp watch:css”时，它会在对我的 SASS 文件的每次更改时触发“部署”功能，进而触发“样式”功能来编译我的 CSS。

【讨论】：