Gulp4不输出console.log

Question

我正在尝试修复 Gulp 但它似乎不起作用。我的主要问题是 console.log 在终端中不可见。最重要的是 Gulp 似乎没有读取文件夹名称。您知道可能是什么问题吗？为什么 console.log 在终端中不可见？

// 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

见 gulp.task 签名 https://gulpjs.com/docs/en/api/task#signature:

task([taskName], taskFunction)

你有：

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();
  }
);

哪个有效：

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

所以您的 default task 有三个参数 - 因此永远不会达到 console.log。将该函数移动到 gulp.series 中，例如：

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

我试过了：

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

一个比你的更简单的版本，但结构与我建议的相同，并且可以工作。请注意 done 调用，我使用的是函数名称，例如 scripts，而不是任务名称，例如 'scripts'，但这没有区别。当然，如果您在前面的任务中有其他错误或者它们没有终止，那么最后一个 console.log 将不会到达。如果您在一组更简单的已知好任务上尝试我的 default 结构，它将起作用。

并且您的 'compile-scss' 任务不再包含对您的 folders 函数的调用 - 因此 folder 未定义。

Gulp4不输出console.log

Gulp 4 doesn't output console.log

javascript

gulp