让我们说清楚并编写代码：

Question

我一直在将所有gulp v3代码库迁移到v4。但是我被卡在了gulp start函数的位置，在gulp v4中运行gulp start时会抛出错误。

这是我在版本3中拥有的功能：

gulp.task('default', ['watch'], function () {

    gulp.start('styles', 'scripts', 'images');

});

当迁移到gulp的v4时，我实现了以下功能：

gulp.task('default', gulp.parallel('watch', function(done) {

    gulp.start('styles', 'scripts', 'images');

    done();

}));

如何使用新的gulp版本完成相同的过程？我需要在gulp.parallel内使用gulp.series吗？

Answer 1

将任务更改为功能后，只需使用即可；

gulp.task('default', gulp.series (watch, gulp.parallel(styles, scripts, images),

    function (done) { done(); }    
));

首先运行watch函数，然后并行运行样式，脚本和图像函数。

来自gulp.series documentation：

组合物的嵌套深度没有任何限制使用series（）和parallel（）进行操作。

Answer 2

来自https://github.com/gulpjs/gulp/issues/755

start是在gulp 3中执行所需操作的唯一方法，但从未如此由gulp正式支持（由依赖项公开），并且完全吞没了。4.不建议使用它。

这从没想过，并且在v4中没有直接等效项，实际上您需要直接调用该函数。就是这么简单，一切都在gulp v4中起作用，我们完成了done（）来标记任务何时完成（太好了）。

让我们说清楚并编写代码：

请注意，您需要命名函数（将是全局/局部变量（取决于瓢）），将其传递给您创建的任务，并且在需要启动任务时，直接调用该函数。（gulp.task只是在这里将task函数公开给gulp-cli）。

example:

// minimizableControllBar
gulp.task('minimizableControllBar_css', minimizableControllBar_css)

function minimizableControllBar_css(done) {
    return gulp.src('./app/js/minimizableControllBar/modules/**/*.css')
        .pipe(concat('presetsAll.css')).on('error', console.log)
        .pipe(gulp.dest('./app/js/minimizableControllBar/'))
    if(done) done(); // this is in order to make the functions usable with and without done
}


gulp.task('minimizableControllBar_jsonPreset', minimizableControllBar_jsonPreset)

function minimizableControllBar_jsonPreset(done) {
    gulp.src('./app/js/minimizableControllBar/modules/**/*.json')
        .pipe(gutil.buffer(function (err, files) {
            let presetAllJsonStr = '{\n'
            let i = 0
            for (i = 0; i < files.length - 1; i++) {
             //.....

        }))
    if(done) done();
}

在这里，我通常会在[设置观察者时]使用gulp.start（）

gulp.task('watch', function (done) {
    // here we tell what we want to watch (we can watch multiple files and even directories you can see /**/*.js (wildcards)  ==> all the folders including . which is current folders, and to watch all the .js files whatever the name)
    watch('./app/js/minimizableControllBar/modules/**/*.json', function () {
        minimizableControllBar_jsonPreset() // in place of gulp.start('minimizableControllBar_jsonPreset')  // Note i kept the same names of task and function, but it can be anything (but still it is a good thing)
    })
    watch('./app/js/minimizableControllBar/modules/**/*.css', function () {
        minimizableControllBar_css() //// in place of gulp.start('minimizableControllBar_css')
    })

    //json comments 
    var base = path.join(__dirname, 'app/tempGulp/json/')
    watch('./app/tempGulp/json/**/*.json', function (evt) {
        // console.log('hi there ');
        jsonCommentWatchEvt = evt
        jsonComment()
    })
    done();
});

现在很好，但是！除非您使用console.log，否则您将看不到任何东西，而这与gulp.start（）无关。是的，我们必须记录自己的消息。好消息是，使用帮助程序很简单。我在这里建立了一个： https://www.npmjs.com/package/gulp-task-logger https://github.com/MohamedLamineAllal/gulpTaskLogger

首次导入和初始化（请务必阅读文档）：

var TaskLogger = require('gulp-task-logger');
const tl = new TaskLogger(); // with default config (no options)

使用方法：

gulp.task('jsonComment', jsonComment);
function jsonComment(done) {
  if (!done) tl.task("jsonComment").startLog(); //<======= log at task start [notice if(!done)! it's to make sure we are only logging ourselves, when we are calling the function ourselves without done! if it's the normal from cli task execution, then the log will happen by gulp]
  jsonComment_Task(jsonCommentWatchEvt, done);
}

然后任务在另一个函数中继续执行，没问题，我们的助手没有问题：

function jsonComment_Task(evt, done) {
    // var dest = path.join(__dirname, 'app/json/', getRelevantPath_usingBase(base, evt.path))
    gulp.src(evt.path, {
        base: './app/tempGulp/json/'
    }).
        pipe(stripJsonComments({ whitespace: false })).on('error', console.log).
        on('data', function (file) { // here we want to manipulate the resulting stream

            var str = file.contents.toString()

            var stream = source(path.basename(file.path))
            stream.end(str.replace(/\n\s*\n/g, '\n\n'))
            stream.
                pipe(gulp.dest('./app/json/')).on('error', console.log)
            if (done) done();//<!!!!================!!!!!!!!!! if done available, we are not calling the function directly, no need to log
            else tl.task('jsonComment').endLog();//<!!!!================!!!!!!!!!! happy ending
        })
}

另一个例子：

// minimizableControllBar
gulp.task('minimizableControllBar_css', minimizableControllBar_css)//<!!!!================!!!!!!!!!!

function minimizableControllBar_css(done) {//<!!!!================!!!!!!!!!!
  if (!done) tl.task("minimizableControllBar_css").startLog(); //<!!!!================!!!!!!!!!!
  gulp
    .src("./app/js/minimizableControllBar/modules/**/*.css")
    .pipe(concat("presetsAll.css"))
    .on("error", console.log)
    .pipe(gulp.dest("./app/js/minimizableControllBar/"))
    .on("end", () => {
      if (done) done();
        else tl.task("minimizableControllBar_css").endLog();//<!!!!================!!!!!!!!!!
    });
}

所以上面的摘录来自我写的一个实际的gulp文件，在我正在从事的开源库项目中，尚未公开。您可以在这里找到文件： https://github.com/MohamedLamineAllal/ftreeJsGulpFile

将gulp.start函数迁移到Gulp v4

2 个答案:

让我们说清楚并编写代码：