Gulp 錯誤：“以下任務未完成；您是否忘記發出異步完成信號”

Question

我嘗試在我擁有gulpfile.js的項目目錄中的終端上運行gulp命令，但出現錯誤， The following tasks did not complete: default, gulpSass; Did you forget to signal async completion The following tasks did not complete: default, gulpSass; Did you forget to signal async completion ，我嘗試尋找解決方案但無濟於事。

我檢查了我面臨問題的一些可能原因並實施了一些，但我仍然不斷收到錯誤。

我嘗試過的一種可能的解決方法是在所有函數中使用async await ，但它並沒有解決問題。

這是我的gulpfile.js

var gulp     = require('gulp'),
sass         = require('gulp-sass'),
plumber      = require('gulp-plumber'),
notify       = require('gulp-notify'),
livereload   = require('gulp-livereload')
concat       = require('gulp-concat'),
uglify       = require('gulp-uglify'),


// Concat all js into one script
async function js ( cb ) {
  return await gulp.src(['./assets/js/lib/*.js','./assets/js/scripts/**/*.js'])
    .pipe(plumber(plumberErrorHandler))
    //.pipe(jshint())
    //.pipe(jshint.reporter('jshint-stylish'))
    .pipe(sourcemaps.init())
    .pipe(concat('scripts.min.js'))
    .pipe(uglify()) 
    .pipe(sourcemaps.write('../maps/'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(livereload());

  cb();
}

// Sass compiler + Maps
async function sass ( cb ) {
  return await gulp.src('./assets/scss/*.scss')
    .pipe(plumber(plumberErrorHandler))
    .pipe(sassGlob())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'development'}))
    //.pipe(autoprefixer({
     // browsers: ['>1%'],
    //remove: false
    //}))
    .pipe(sourcemaps.write('./assets/maps'))
    .pipe(gulp.dest('.'))
    .pipe(livereload());

  cb();
}

// Watch for changes
async function watch ( cb ) {
  livereload.listen();
  return await gulp.watch('./assets/scss/**/*', ['sass']);
  return await gulp.watch('./assets/js/lib/**/*.js', ['js']);
  return await gulp.watch('./assets/js/scripts/**/*.js', ['js']);
  return await gulp.watch('./**/*.php').on('change', async function(file) {
    livereload.changed(file.path);
  });

  cb();
}

// Error handling/reporting
var plumberErrorHandler = { 
  errorHandler: notify.onError({
    title: 'Gulp',
    message: 'Error: <%= error.message %>'
  })
}

// Default
exports.default = gulp.series(js, sass, watch);

Answer 1

gulp.src和.pipe確實異步運行，但他們不使用 promise Z8A5DA52E 不能使用 await 。 相反，您可以按原樣返回它們，gulp 將處理等待。 由於 gulp 處理它，您也不需要在完成時調用cb() 。
您還在watch()中返回四次，但這會導致最后三個不運行。 相反，您可以使用parallel （因為 watch 永遠運行意味着最后三個永遠不會與series一起運行）。

var gulp     = require('gulp'),
sass         = require('gulp-sass'),
plumber      = require('gulp-plumber'),
notify       = require('gulp-notify'),
livereload   = require('gulp-livereload')
concat       = require('gulp-concat'),
uglify       = require('gulp-uglify'),


// Concat all js into one script
function js ( cb ) {
  return gulp.src(['./assets/js/lib/*.js','./assets/js/scripts/**/*.js'])
    .pipe(plumber(plumberErrorHandler))
    //.pipe(jshint())
    //.pipe(jshint.reporter('jshint-stylish'))
    .pipe(sourcemaps.init())
    .pipe(concat('scripts.min.js'))
    .pipe(uglify()) 
    .pipe(sourcemaps.write('../maps/'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(livereload());
}

// Sass compiler + Maps
function sass ( cb ) {
  return gulp.src('./assets/scss/*.scss')
    .pipe(plumber(plumberErrorHandler))
    .pipe(sassGlob())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'development'}))
    //.pipe(autoprefixer({
     // browsers: ['>1%'],
    //remove: false
    //}))
    .pipe(sourcemaps.write('./assets/maps'))
    .pipe(gulp.dest('.'))
    .pipe(livereload());
}

// Watch for changes
function watch ( cb ) {
  livereload.listen();

  return gulp.parallel(
    gulp.watch('./assets/scss/**/*', ['sass']),
    gulp.watch('./assets/js/lib/**/*.js', ['js']),
    gulp.watch('./assets/js/scripts/**/*.js', ['js']),
    gulp.watch('./**/*.php').on('change', function(file) {
      livereload.changed(file.path);
    })
  );
}

// Error handling/reporting
var plumberErrorHandler = { 
  errorHandler: notify.onError({
    title: 'Gulp',
    message: 'Error: <%= error.message %>'
  })
}

// Default
exports.default = gulp.series(js, sass, watch);

Answer 2

首先，您的錯誤消息The following tasks did not complete: default, gulpSass; 但是您的代碼中沒有gulpSass任務，因此您在將其復制到此處之前進行了更改。

其次，這種語法很舊：

return await gulp.watch('./assets/scss/**/*', ['sass']);

改用這個：

gulp.watch('./assets/scss/**/*', sass);

You are using the function name form of tasks not the gulp.task('sass') syntax, so in the watch calls you use the function name sass but not as a string 'sass' .

在您的watch任務中進行此更改。

而且我會擺脫return await - 這可能是一個問題。