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

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

我的错误在哪里？

Answer 1

缺少两点：浏览器同步变量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);

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

1 个答案: