将gulp.start函数迁移到Gulp v4

Question

我一直在将所有gulp v3代码库迁移到v4中。 但是我已经陷入了我有吞咽启动功能的地步，当我在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文档 ：

使用series（）和parallel（）对组合操作的嵌套深度没有强制限制。

Answer 2

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

start是在gulp 3中做你想做的事情的唯一方法，但它从来没有被gulp正式支持（它被一个依赖项暴露）并且完全消失了。我不建议使用它。

它从来没有打算，并且在v4中没有直接的等价物，实际上你需要直接调用该函数。 就这么简单，一切都在gulp v4中运行，我们已经做了（）来标记任务完成时（这太好了）。

让我们清楚地写下代码：

注意，您需要命名您的函数（它将是一个全局/局部变量（取决于勺子）），您将它传递给您创建的任务，并且当您需要启动任务时，您可以直接调用该函数。 （gulp.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