Gulp 4 错误：“您是否忘记发出异步完成信号？”答案

【问题标题】：Gulp 4 error: "Did you forget to signal async completion?"Gulp 4 错误：“您是否忘记发出异步完成信号？”
【发布时间】：2019-07-13 08:15:57
【问题描述】：

我正在做一个需要将.sass 文件编译成.css 文件的小项目。我之前使用过 Gulp 并喜欢它，但我的旧 gulpfile.js 不再工作了，因为 Gulp 从版本 4 开始发生了变化。

我发了一个新的gulpfile.js:

var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    rename  = require('gulp-rename');

var paths = {
  styles: {
    src: 'src/scss/*.scss',
    dest: 'build/css'
  }
};

function styles() {
  return gulp
    .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
.pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp
    .watch(paths.styles.src, styles);
}

var syncConfig = {
    server: {
      baseDir   : './',
      index     : 'index.html'
    },
    port        : 3000,
    open        : false
  };

  // browser-sync
  function server() {
    init(syncConfig);
  }

var build = gulp.parallel(styles, watch, server);

gulp
  .task(build);
gulp
  .task('default', build);

我有一个“您是否忘记发出异步完成信号？”控制台返回错误。

我的错误在哪里？

【问题讨论】：

传递给 gulp.parallel 的函数在完成后必须调用回调，请参阅gulpjs.com/docs/en/api/parallel
@Molda function server(done) { if (browsersync) browsersync.init(syncConfig); done(); } 有同样的结果，不幸的是。
watch 和 styles 函数呢？
@Molda 我提供的所有代码都在帖子中。
你说在server函数中调用done()会导致同样的错误，所以我问你是否在所有函数（样式、手表和服务器）中调用了回调函数done你正在传递给gulp.parallel？因为如果不是，那就是问题所在。

标签： node.js gulp gulp-sass

【解决方案1】：

缺少两件事：browsersync 变量browsersync = require('browser-sync').create() 和服务器函数的回调：

function server(done) {
  if (browsersync) browsersync.init(syncConfig);
  done();
}

它把SASS编译成CSS，还是有这个问题：当main.scss发生变化时，页面不会自动重新加载。

这是完整的代码：

var gulp    = require('gulp'),
    browsersync = require('browser-sync').create(),
    sass    = require('gulp-sass'),
    rename  = require('gulp-rename');

var paths = {
  styles: {
    src: 'src/scss/*.scss',
    dest: 'build/css'
  }
};

function styles() {
  return gulp
    .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
.pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp
    .watch(paths.styles.src, styles);
}

var syncConfig = {
    server: {
      baseDir   : './',
      index     : 'index.html'
    },
    port        : 3000,
    open        : false
  };

// browser-sync
function server(done) {
  if (browsersync) browsersync.init(syncConfig);
  done();
}

var build = gulp.parallel(styles, watch, server);

gulp
  .task(build);
gulp
  .task('default', build);

【讨论】：