Question

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

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

以下是我尝试在gulp watch中添加'deploy'的相关代码：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( '/' ) );

} );

Answer 1

想出来......

观看：css＆＃39;任务调用我的部署＆＃39;任务代替＆＃39;样式＆＃39;：

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

＆＃39>＆＃39;风格＆＃39;任务保持不变

部署＆＃39;任务采取＆＃39;样式＆＃39;任务作为这样的依赖

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

现在跑步时，gulp watch：css＆＃39;它触发了部署＆＃39;对我的SASS文件的每次更改都起作用，这反过来会触发＆＃39;样式＆＃39;编译我的CSS的函数。

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

1 个答案: