javascript - 在 Gulp 中，您如何仅在缩小后更改了 SFTP 文件？

Question

使用 gulp-sftp，我似乎不能只上传 CSS 缩小后更改的文件。

下面的半工作片段从编译 CSS 开始，然后继续观察 src 目录中的变化。接下来，它会监视 dist 目录(存储缩小的 CSS 的位置)中的更改，以便将该文件上传到 Web 服务器。

但是，这不起作用，因为 gulp 正在上传所有内容，而不仅仅是已更改和缩小的文件。

var gulp = require('gulp'),
    changed = require('gulp-changed'),
    minifycss = require('gulp-minify-css'),
    sftp = require('gulp-sftp')
;

var src = './src/',
    dist = './dist/';

var srcStyles = src + '**/*.css',
    distStyles = dist + '**/*.css';

var host = 'ftp.xxxx.xx.xx',
    auth = 'keyMain',
    remotePath = 'public_html';

gulp.task('compilecss', function(){
    gulp.src(srcStyles)
        .pipe(changed(dist))
        .pipe(minifycss({keepBreaks: true}))
        .pipe(gulp.dest(dist))
    ;
});

gulp.task('uploadcss', function(){
    gulp.src(distStyles)
        .pipe(changed(dist))
        .pipe(sftp({
            host: host,
            auth: auth,
            remotePath: remotePath
        }))
    ;
});

gulp.task('main', function(){
    gulp.start('compilecss');
});

gulp.task('watch', function(){
    gulp.watch(srcStyles, ['compilecss']);
    gulp.watch(distStyles, ['uploadcss']);
});

gulp.task('default', ['main', 'watch']);

Answer 1

不需要两个任务。 gulp 是基于文件的，这意味着您应该考虑管道，而不是任务。

var gulp = require('gulp'),
  changed = require('gulp-changed'),
  minifycss = require('gulp-minify-css'),
  sftp = require('gulp-sftp');

var src = './src/',
  dist = './dist/';

var srcStyles = src + '**/*.css',
  distStyles = dist + '**/*.css';

var host = 'ftp.xxxx.xx.xx',
  auth = 'keyMain',
  remotePath = 'public_html';

gulp.task('compile', function (){
  return gulp.src(srcStyles)
    .pipe(changed(dist))
    .pipe(minifycss({
      keepBreaks: true
    }))
    .pipe(gulp.dest(dist))
    .pipe(sftp({
      host: host,
      auth: auth,
      remotePath: remotePath
    }));
});

gulp.task('watch', function (){
  gulp.watch(srcStyles, ['compile']);
});

gulp.task('default', ['compile', 'watch']);