javascript - In Gulp how do you only SFTP files which have changed after minification? - Stack Overflow

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

Share Improve this question Follow asked May 10, 2014 at 13:49 u01jmg3u01jmg3 73411 gold badge1212 silver badges3131 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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