Question

我正在试验gulp 4，我有一些任务（buildIndex，buildContent，buildStyling和buildScripts）将文件插入构建文件夹。

我想将这些任务分组为一个任务，所以我可以在顶层执行该分组。

这就是我现在如何使其工作的方式。由于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'));

如何分组任务？

1 个答案: