Задачи Gulp 4 не работают параллельно

Question

Я мигрировал с gulp 3 на 4. Все было хорошо в течение недели, а затем мой сборочный конвейер сломался.У меня есть сайт Hugo, который должен быть перестроен на gulp build.

Задача сборки вызывает три другие задачи параллельно: gulp.parallel("css", "js", "hugo");

При запуске gulp build, gulp утверждает, что она прошла успешно за 2,19 мс, что слишком быстро.Предполагается, что эти три задачи выводят файлы в мою папку dist, но она вообще не запускает мои задачи.

Запуск задач css, js и hugo вручную в терминале работает какожидается.

Я довольно новичок в глотке 4, поэтому я подозреваю, что мне не хватает некоторых деталей.Вот мой глоток:

import gulp from "gulp";
import cp from "child_process";
import gutil from "gulp-util";
import postcss from "gulp-postcss";
import cssImport from "postcss-import";
import cssnext from "postcss-cssnext";
import BrowserSync from "browser-sync";
import webpack from "webpack";
import webpackConfig from "./webpack.conf";
import cssnano from "cssnano";
import imagemin from "gulp-imagemin";
import imageminMozjpeg  from "imagemin-mozjpeg";
import webp from "imagemin-webp";
import gm from "gulp-gm";

const browserSync = BrowserSync.create();
const hugoBin = `./bin/hugo.${process.platform === "win32" ? "exe" : process.platform}`;
const defaultArgs = ["-d", "../dist", "-s", "site"];

if (process.env.DEBUG) {
  defaultArgs.unshift("--debug");
}

const hugo = (cb) => {
  buildSite(cb);
};
const hugoPreview = (cb) => {
  buildSite(cb, gulp.parallel("--buildDrafts", "--buildFuture"));
  cb();
};
const build  = (cb) => {
  gulp.parallel("css", "js", "hugo");
  cb();
};
const buildPreview = (cb) => {
  gulp.parallel("css", "js", "hugoPreview");
  cb();
};


const css = (cb) => {
  gulp.src("./src/css/*.css")
    .pipe(postcss([
      cssImport({
        from: "./src/css/main.css"
      }),
      cssnext(),
      cssnano(),
    ]))
    .pipe(gulp.dest("./dist/css"))
    .pipe(browserSync.stream());
  cb();
};

const js = (cb) => {
  const myConfig = Object.assign({}, webpackConfig);

  webpack(myConfig, (err, stats) => {
    if (err) throw new gutil.PluginError("webpack", err);
    gutil.log("[webpack]", stats.toString({
      colors: true,
      progress: true
    }));
    browserSync.reload();
    cb();
  });
};

const webpConvert = (cb) => {
  gulp.src("./dist/img/**/*")
    .pipe(gm((gmfile) => {
      return gmfile.colorspace("rgb");
    }))
    .pipe(imagemin([
      webp({
        quality: 75
      })
    ]))
    .pipe(gulp.dest("./dist/webp"));
  cb();
};

const imgSquash = (cb) => {
  return gulp.src("./site/static/img/**/*")
    .pipe(imagemin([
      imagemin.gifsicle({
        interlaced: true,
        optimizationLevel: 3
      }),
      imagemin.jpegtran({
        progressive: true
      }),
      imageminMozjpeg({
        quality: 80
      }),
      imagemin.optipng({
        optimizationLevel: 5
      }),
      imagemin.svgo({
        plugins: [{
          removeViewBox: true
        },
        {
          cleanupIDs: false
        }
        ]
      })
    ]))
    .pipe(gulp.dest("./dist/img"));
};

const server = (cb) => {
  browserSync.init({
    server: {
      baseDir: "./dist"
    }
  });
  gulp.watch("./src/js/**/*.js", js);
  gulp.watch("./src/css/**/*.css", css);
  gulp.watch("./site/**/*", hugo);
  cb();
};

const buildSite = (cb, options) => {
  const args = options ? defaultArgs.concat(options) : defaultArgs;

  return cp.spawn(hugoBin, args, {
    stdio: "inherit"
  }).on("close", (code) => {
    if (code === 0) {
      browserSync.reload("notify:false");
      cb();
    } else {
      browserSync.notify("Hugo build failed :(");
      cb("Hugo build failed");
    }
  });
};

export {
  hugo,
  hugoPreview,
  build,
  buildPreview,
  css,
  js,
  webpConvert,
  imgSquash,
  server
};

Answer 1

Когда вы выполняете обратный вызов в своих задачах, gulp считает, что задача завершена. Вместо вызова обратного вызова вы должны возвращать поток, чтобы gulp знал, когда задача завершена.

Вы должны изменить свои задачи примерно так:

const css = (cb) => {
  return gulp.src("./src/css/*.css")
    .pipe(postcss([
      cssImport({
        from: "./src/css/main.css"
      }),
      cssnext(),
      cssnano(),
    ]))
    .pipe(gulp.dest("./dist/css"))
    .pipe(browserSync.stream());
  // cb(); --comment this line
};

Добавить строку возврата и комментария с помощью cb ();