Using gulp-sftp, I can't seem to only upload the file that has changed after CSS minification.

The semi-working snippet below begins by piling the CSS and then continues to watch for changes in the src dir. It follows on by watching for changes in the dist dir (where minified CSS is stored) in order to upload that file to a web server.

However, this does not work as gulp is uploading everything rather than only the file that has changed and been minified.

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('pilecss', 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('pilecss');
});

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

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

Using gulp-sftp, I can't seem to only upload the file that has changed after CSS minification.

The semi-working snippet below begins by piling the CSS and then continues to watch for changes in the src dir. It follows on by watching for changes in the dist dir (where minified CSS is stored) in order to upload that file to a web server.

However, this does not work as gulp is uploading everything rather than only the file that has changed and been minified.

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('pilecss', 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('pilecss');
});

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

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

• javascript
• css
• node.js
• gulp

• You asked the same question over here: github./gulpjs/gulp/issues/465, maybe you care in sharing the results here? – Mark Commented Jun 18, 2014 at 12:20
• Apologies - I've now answered my own question – u01jmg3 Commented Jun 23, 2014 at 10:27

1 Answer 1

No need for two tasks. gulp is file-based which means you should think in pipelines, not tasks.

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('pile', 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, ['pile']);
});

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