升级gulp-sass到5.0后出现Async Issue任务未完成错误如何解决？

• 核心冲突：你在代码顶部通过var sass = require('gulp-sass')(require('sass'));声明了接收gulp-sass实例的变量，后续又定义了同名的sass任务函数，两者命名冲突导致函数被覆盖，Gulp无法正确识别任务返回的流，触发异步任务未完成的报错
• 可选优化：serve函数没有明确告知Gulp异步任务初始化完成，也可能在部分场景下触发同类报错

1. 重命名sass任务函数，避免和引入的gulp-sass变量重名，比如改为compileSass
2. 给serve函数添加done回调，执行后通知Gulp任务启动完成
3. 同步修改所有引用该任务函数的地方（watch、task注册处）

var sourcemaps    = require('gulp-sourcemaps');
var mode          = require('gulp-mode')();
var browserSync   = require('browser-sync').create();
var sass          = require('gulp-sass')(require('sass'));
var $             = require('gulp-load-plugins')();
var autoprefixer  = require('autoprefixer');
var isProduction = mode.production();

var sassPaths = [
//   'node_modules/foundation-sites/scss',
//   'node_modules/motion-ui/src'
];

// 重命名函数，避免命名冲突
function compileSass() {
  return gulp.src('assets/sass/theme.scss')
    .pipe(mode.development(sourcemaps.init()))
    .pipe($.sass.sync(({
      includePaths: sassPaths,
      outputStyle: 'compressed' // if css compressed **file size**
    })).on('error', $.sass.logError))
    .pipe($.postcss([
      autoprefixer({ overrideBrowserslist: ['last 2 versions', 'ie >= 9'] })
    ]))
    .pipe(mode.development(sourcemaps.write()))
    .pipe(gulp.dest('assets/css'))
    .pipe(browserSync.stream());
};

// 增加done回调通知任务完成
function serve(done) {
    browserSync.init({
      server: "./"
    });
  gulp.watch("assets/sass/**/*.{scss,sass}", compileSass);
  gulp.watch("*.html").on('change', browserSync.reload);
  done();
}

// 同步修改任务注册的引用
gulp.task('sass', compileSass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));

if( isProduction ){
  gulp.task('default', gulp.series(compileSass));
}

修改完成后重新运行gulp命令即可正常执行任务，不会再触发异步未完成的报错。

内容的提问来源于stack exchange，提问作者Ali Mirza