node.js - Gulp 4 错误：“您是否忘记发出异步完成信号？”

Question

我正在做一个需要将.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);

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

我的错误在哪里？

标签： node.jsgulpgulp-sass

Answer 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);