Gulp 4 doesn't output console.log

Question

I am trying to fix Gulp but it doesn't seem to work. My main issue is that the console.log is not visible in terminal. On top of that it seems that Gulp doesn't read the folder names. Do you know what might be the issue and why is console.log not visible in terminal?

// Include gulp
var gulp = require('gulp');

// Include plugins
var path = require('path');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var folders = require('gulp-folders-4x');
var imagemin = require('gulp-imagemin');

// Config
var inputFolders =  'src'
var outputFolders = 'public'
var scssInput =     'styles';
var scssOutput =    'styles'
var jsInput =       'scripts';
var jsOutput =      'scripts';
var mediaInput =    'images';
var mediaOutput =   'images';
var backupImageFolder = 'backup-image';
var folder = '';

console.log(__dirname);

// compile scss into css
gulp.task('compile-scss',function() {
  var processors = [
    autoprefixer()
  ];
  return gulp.src(path.join(inputFolders, folder, scssInput, '*.scss'))
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(cleanCSS({compatibility:'*'}))
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + scssOutput));

});

// concatenate and minify js
gulp.task('scripts', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/' + jsInput + '/*.js')
    // .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + jsOutput));
}));

// deploy any media and losslessly optimise if possible
gulp.task('media', folders(inputFolders, function(folder) {
  return gulp.src([inputFolders + '/' + folder + '/' + mediaInput + '/*', inputFolders + '/' + folder + '/' + mediaInput + '/**/*'])
    .pipe(imagemin())
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + mediaOutput));
}));

// copy across html
gulp.task('html', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/*.html')
    .pipe(gulp.dest(outputFolders + '/' + folder))
}));

// copy across back-up image for the banner
gulp.task('copy-backup-image', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/' + backupImageFolder + '/*' )
  .pipe(gulp.dest(outputFolders + '/' + folder + '/' + backupImageFolder))
}));

// Watch files for changes, run affected tasks
gulp.task('watch', function() {
  gulp.watch([inputFolders + '/*/' + scssInput + '/*.scss'], gulp.series('compile-scss'));
  gulp.watch([inputFolders + '/*/' + scssInput + '/**/*.scss'], gulp.series('compile-scss'));
  gulp.watch([inputFolders + '/*/' + jsInput + '/*.js'], gulp.series('scripts'));
  gulp.watch([inputFolders + '/*/' + mediaInput + '/*'], gulp.series('media'));
  gulp.watch([inputFolders + '/*/' + mediaInput + '/**/*'], gulp.series('media'));
  gulp.watch([inputFolders + '/*/*.html'],  gulp.series('html'));
  gulp.watch([inputFolders + '/*/' + backupImageFolder + '/*'],  gulp.series('copy-backup-image'));
});

// Default task
// gulp.task('default', function(done) {
//   gulp.series('compile-scss', 'scripts', 'media', 'html', 'copy-backup-image', 'watch');
//   done();
// });

// gulp.task('default', gulp.series(['compile-scss', 'scripts', 'media', 'html', 'copy-backup-image', 'watch']));

// Default task
gulp.task(
  'default',
  gulp.series(gulp.parallel('compile-scss', 'scripts', 'media', 'html', 'copy-backup-image'), 'watch'),
  function() {
    console.log("Running build task in development mode, use gulp prod for production mode");
    done();
  }
);

Answer 1

See the gulp.task signature https://gulpjs.com/docs/en/api/task#signature :

task([taskName], taskFunction)

You have:

gulp.task(
  'default',
  gulp.series(gulp.parallel('compile-scss', 'scripts', 'media', 'html', 'copy-backup-image'), 'watch'),
  function() {
    console.log("Running build task in development mode, use gulp prod for production mode");
    done();
  }
);

Which is effectively:

gulp.task(
  'default',
  gulp.series(.......) `watch),
  function() {
    console.log();
    done();
  }
);

So you have three parameters to your default task - the console.log thus will never be reached. Move that function, into the gulp.series like:

gulp.task(
  'default',
  gulp.series(....., 'watch', function() { console.log......})  
);

I tried:

gulp.task('default', gulp.series(
  gulp.parallel(scripts),
  watch,
  function (done) { console.log("Here"); done() }
));

a simpler version than yours but the same structure as I suggested and it works. Note the done calls and I am using function names, like scripts instead of task names, like 'scripts' but that makes no difference. Of course, that last console.log won't be reached if you have other errors in preceding tasks or they don't terminate. If you try my default structure on a simpler set of known good tasks it will work.

---

And your 'compile-scss' task doesn't include a call to your folders function anymore - so folder is undefined.