Gulp 4 任务不并行运行

Question

我已经从 gulp 3 迁移到 4。一个星期一切都很好，然后我的构建管道坏了。我有一个应该在 gulp build 上重建的 hugo 网站。

构建任务并行调用其他三个任务：gulp.parallel("css", "js", "hugo");

运行gulp build 时，gulp 声称它在 2.19 毫秒内成功，这太快了。这三个任务应该将文件输出到我的 dist 文件夹，但它根本不运行我的任务。

在终端中手动运行css、js 和hugo 任务可以按预期工作。

我对 gulp 4 还很陌生，所以我怀疑我遗漏了一些细节。这是我的 gulpfile：

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()添加'return'和注释行；