如何分组任务？

Question

我正在尝试gulp 4，我有几个任务（buildIndex，buildContent，buildStyling和buildScripts）在build文件夹中插入文件。

我想将这些任务分组到一个任务中，这样我就可以在顶层执行该组。

这就是我现在的工作方式。它可能在将来不起作用，因为this comment声称gulp 4意图在顶层执行所有任务。

const { src, dest, parallel, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();
const clean = require('gulp-clean');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
var rename = require('gulp-rename');

exports.default = series(
  rebuild,
  parallel(
    host,
    watchSource));

function rebuild(cb) {
  series(
    deleteBuild,
    build)();
  cb();
}

function host(cb) {
  browserSync.init({
    server: {
      baseDir: 'build'
    }
  });
  watch('build/**').on('change', browserSync.reload);
  cb();
}

function watchSource() {
  watch('src/**', rebuild);
}

function deleteBuild() {
  return src('build', { allowEmpty: true, read: false })
    .pipe(clean());
}

function build(cb) {
  parallel(
    buildIndex,
    buildContent,
    buildStyling,
    buildScripts)();
  cb();
}

function buildIndex() {
  return src('src/index.html')
    .pipe(dest('build'))
    .pipe(browserSync.stream());
}

function buildContent() {
  return src('src/content/**/*.html')
    .pipe(dest('build/content'))
    .pipe(browserSync.stream());
}

function buildStyling() {
  return src('src/styling/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(dest('build/styling'))
    .pipe(browserSync.stream());
}

function buildScripts() {
  return src('src/scripts/**/*.js')
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('build/scripts', { sourcemaps: true }))
    .pipe(browserSync.stream());
}

分组任务的正确方法是什么？

Answer 1

编辑：

你已经在export.default中判断了默认任务。如果要添加另一个运行您提到的任务的任务，可以这样做：

并行运行任务：

exports.mynewtask = parallel(buildIndex, buildContent, buildStyling, buildScripts);

一个接一个地运行任务：

exports.mynewtask = series(buildIndex, buildContent, buildStyling, buildScripts);

这可能是分组任务的正确方法，正如您在此Gulp.js documentation for parallel()中看到的那样。

.

与旧的Gulp语法相同的是这样的：

const gulp = require("gulp");
...
gulp.task('default', gulp.parallel('buildIndex', 'buildContent', 'buildStyling', 'buildScripts'));
// or
gulp.task('default', gulp.series('buildIndex', 'buildContent', 'buildStyling', 'buildScripts'));