Gulp 4错误：“您是否忘记了异步完成信号？”

Question

I am working on a small project that needs .sass files compiled into .css files. I have used Gulp a while ago and loved it, but my old gulpfile.js does not work anymore, because Gulp has changed since version 4.

I have made a new 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);

I have a "Did you forget to signal async completion?" error returned by the console.

Where is my mistake?

Answer 1

There ware two things missing: the browsersync variable browsersync = require('browser-sync').create() and the callback for the server function:

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

It compiles SASS to CSS, still there is this problem: the page does not reload automatically when changes are made in the main.scss .

Here is the entire code:

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