0

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

Thomsterdam Web Design
  • 69
  • 12

1 Answers1

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

} );
Mark
  • 143,421
  • 24
  • 428
  • 436
  • Hey @Mark Thanx for taking time to respond, but... I don't quite understand. 1. What do you mean with "Put a return in your 'less' task"? 2. What part of the code should I change to _what_ other bit? Remember I'm a novice. – Thomsterdam Web Design Jul 18 '17 at 18:28
  • I've modified your code to input my changes. Your require statements at the top don't change. – Mark Jul 18 '17 at 18:39
  • Hey @Mark. Much kudos to you. I vaguely understand and hope to be able to understand fully in the future, but for now it suffices to say: it works like a charm! I can use it in Gulp and modify it to do the same for other websites. So Thanx! -- Thom – Thomsterdam Web Design Jul 18 '17 at 19:48
  • You are welcome. Would you mind marking the answer as correct. It will help others to see that it worked and add to my reputation. Thank you. – Mark Jul 18 '17 at 20:43