首页 > 解决方案 > Gulp 4 默认任务与串行和并行

问题描述

我使用 Gulp 在 SO 上查看了许多不同的帖子

CLI version: 2.3.0
Local version: 4.0.2

并尝试了多种方法来实现 gulp 4 默认任务声明:

exports.default = gulp.series(clean, (done) => {
  gulp.parallel(styles, scripts);
  done();
});

gulp.task('default',
  gulp.series(clean, (done) => {
    gulp.parallel(scripts, styles);
    done();
  });
);

function production () {
    return gulp.series(clean, function (done) {
    gulp.parallel(styles, scripts);
    done();
  })
}

exports.default = production

清洁功能很简单:

function clean(cb) {
  console.log("clean");
  del(["dist"]);
  cb();
}

为了测试,我创建了一个测试函数:

function test() {
    console.log("in test");
    return (
        gulp.src(paths.styles.src)
            .pipe(notify("Styles rendered"))
    );
}
exports.test = test;

和一个测试默认功能:

exports.default = gulp.series(clean, (done) => {
    console.log("before styles and scripts");
    gulp.parallel(test);
    console.log("after styles and scripts");
    done();
});

打印到终端的是:

但没有“测试中”。

我在这里想念什么?

标签: javascriptgulp

解决方案


不确定这是否是 Gulp 的设计方式,但基于这个答案,对我有用的代码是:

exports.default = gulp.series(clean, (callbackA) => {
    return gulp.parallel(styles, scripts, (callbackB) =>
    {
        callbackA();
        callbackB();
    })();
});

我要调用的三个任务是:

function clean(cb) {
  del(["dist"]);
  cb();
}


// Define tasks after requiring dependencies
function styles() {
    console.log("in styles");
    return (
        gulp.src(paths.styles.src)
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.styles.dest))
            // Add browsersync stream pipe after compilation
            .pipe(browserSync.stream())
    );
}

// Expose the task by exporting it
// This allows you to run it from the commandline using
// $ gulp style
exports.styles = styles;


function scripts() {
    // Start by calling browserify with our entry pointing to our main javascript file
    return ( gulp.src(paths.scripts.src)
            .pipe(babel())
            .pipe(uglify())
            // Then write the resulting files to a folder
            .pipe(gulp.dest(paths.scripts.dest))
    );
}

// Expose the task, this allows us to call this task
// by running `$ gulp build' in the terminal
exports.scripts = scripts;

除了Gulp 文档和这里,是一个很好的来源。


推荐阅读