In Gulp how do you only SFTP files which have changed after minification?

css, gulp, javascript, node.js

Solution

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

Problem

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 compiling 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('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']); ```

Original source