Why do I have to save the LESS source file twice before Gulp/Vinyl-ftp uploads the bootstrap.min.css?

Question

I've got a gulpfile.js with the content below. I want it to produce the bootstrap.min.css and upload it to the server as soon as I save the LESS file in the /less folder. The problem is: only after saving the file twice, will the end result be uploaded. I guess I'm doing something wrong.

Here is the code I am using:

    var gulp = require ('gulp'),
    //cleanCSS = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    gutil = require('gulp-util'),
    ftp = require ('vinyl-ftp');


// Styles Task using LESS
// Uglifies
gulp.task('less', function(){
    gulp.src('../less/bootstrap.less')
    .pipe(plumber())
    .pipe(less())
    .pipe(autoprefixer({}))
    .pipe(sourcemaps.init())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('../css/'));
});

    // Vinyl FTP 
    gulp.task( 'deploy', function () {

        var conn = ftp.create( {
            host:     '[ftp-address]',
            user:     '[ftp-user]',
            password: '[password]',
            parallel: 10,
            log:      gutil.log
        } );

        var globs = ['../css/bootstrap.min.css'];



        return gulp.src( globs, { base: '.', buffer: false } )
            .pipe( conn.newer( '/public_html/[folder/on/server]/css/' ) ) // only upload newer files
            .pipe( conn.dest( '/public_html/[folder/on/server]/css/' ) );

    } );
// Watch Task
// Watches JS
gulp.task('watch', function(){
    gulp.watch('../less/**/*.less', ['less','deploy']);
});

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

Since I am not a javascript/npm/gulp/node.js expert, I'm at a loss. It bugs me that I need to save the less-file twice. Can anyone identify the error? If you need more info, please feel free to ask.

Thanx,

Thom

Answer 1

You have two possible issues:

1. Put a return in your 'less' task so gulp will know it has finished.
2. You cannot assume in your 'watch' task that ['less', 'deploy'] is run/finished in any particular order. They are run in parallel so the order may vary. The same with the 'default' task.

Better to make your your 'deploy' task dependent on the 'less' task ala

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

and change to

 gulp.watch('../less/**/*.less', ['deploy']);


// Styles Task using LESS
// Uglifies
gulp.task('less', function(){
// add the return to the next line
  return gulp.src('../less/bootstrap.less')
  .pipe(plumber())
  .pipe(less())
  .pipe(autoprefixer({}))
  .pipe(sourcemaps.init())
  .pipe(rename({suffix: '.min'}))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('../css/'));
});

// Watch Task
// Watches JS
gulp.task('watch', function(){
  gulp.watch('../less/**/*.less', ['deploy']);
});

// Vinyl FTP 
gulp.task( 'deploy', ['less'], function () {

    var conn = ftp.create( {
        host:     '[ftp-address]',
        user:     '[ftp-user]',
        password: '[password]',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = ['../css/bootstrap.min.css'];

    return gulp.src( globs, { base: '.', buffer: false } )
        .pipe( conn.newer( '/public_html/[folder/on/server]/css/' ) ) // only upload newer files
        .pipe( conn.dest( '/public_html/[folder/on/server]/css/' ) );

} );