具有两个不同操作的Gulpfile任务结束

Question

我对那件事有点缺乏想象力。我的目标是检索一个json对象，这样我就可以在我想要翻译的所有文件上运行一个替换字符串，我已经查看了很多翻译库，但是这种方法是我所能想到的最好的方法。无论如何，我在这里的问题是，一旦我得到我的json对象，我必须运行所有的文件，当它完成后，完成任务'trad‘。我做了一些研究，并尝试了很多事情，但有一些东西，我错过了，一些我不明白的好办法去做吗？请帮帮忙！

    gulp.task('trad', gulp.series( 'createTradFile', 'copyBeforeTrad',  function( done ) {
    var data = require('gulp-data');
    var path = require('path');
    var fs = require('fs');
    var replace2 = require('gulp-string-replace');
    var transObj = null;

    var translateAll = function()
    {
        var files = gulp.src(['fr/**/*.html', 'fr/**/*.js']);

        for (var k in transObj)
        {
            if (transObj[k].ID)
            {
             console.log("TRAD " + transObj[k].ID + " TO " + transObj[k].LANG1);

                files.pipe(replace2(new RegExp('\\+' + transObj[k].ID + '\\+', 'g'),
                                    transObj[k].LANG1,
                                    {'logs': {'enabled': true}}))
                .pipe(chmod(755));
            }
        }
        files.pipe(gulp.dest("fr"))
             .on('end', done);
    };

    gulp.src('distTemp/wording.json')
                .pipe(data(function(file) {
                    transObj = JSON.parse( fs.readFileSync('distTemp/' + path.basename(file.path)));
                    console.log("TRAD first part OK");
                    translateAll();
                 })); 
   }));

因此，这段代码也会像我想要的那样翻译，但是任务并没有结束：

[16:38:34] The following tasks did not complete: trad, <anonymous>
[16:38:34] Did you forget to signal async completion?

Answer 1

因此，经过一番研究，我找到了这个(几乎是糟糕的)解决方案，它能解决问题(如果你有更好的解决方案，请回答)。

var transObj = null;

gulp.task("retrieveTradObject", function(){
var data = require('gulp-data');
var path = require('path');
var fs = require('fs');

return gulp.src('distTemp/wording.json')
            .pipe(data(function(file) {
                transObj = JSON.parse( fs.readFileSync('distTemp/' + path.basename(file.path)));
                console.log("TRAD first part OK");
             }));
});

gulp.task('trad', gulp.series( 'createTradFile', 'copyBeforeTrad', 'retrieveTradObject',  function( done ) {

var replace2 = require('gulp-string-replace');

var files = gulp.src(['fr/**/*.html', 'fr/**/*.js']);

for (var k in transObj)
{
    if (transObj[k].ID)
    {
     console.log("TRAD " + transObj[k].ID + " TO " + transObj[k].LANG1);

        files = files.pipe(replace2(new RegExp('\\+' + transObj[k].ID + '\\+', 'g'),
                            transObj[k].LANG1,
                            {'logs': {'enabled': true}}))
        .pipe(chmod(755));
    }
}
files.pipe(gulp.dest("fr"));
return files;
}));

因此，这里的主要思想是将这两个承诺分离为任务(主要是为了以后更好地理解代码)，然后执行文件= files.pipe( .)在这里解释：如何在吞咽中创建重复管道？

希望这能帮上忙！

Answer 2

我不确定我100%理解这个问题，所以我接受dv的问题，但我正在谈论的是类似吞咽跑序的东西

你可以做各种像这样的任务

var gulp = require('gulp');
//webp images for optimization on some browsers
const webp = require('gulp-webp');
//responsive images!
var responsive = require('gulp-responsive-images');
//gulp delete for cleaning
var del = require('del');
//run sequence to make sure each gulp command completes in the right order.
var runSequence = require('run-sequence');
// =======================================================================// 
// !                Default and bulk tasks                                //        
// =======================================================================//  
//default runs when the user types 'gulp' into CLI
//first clean is ran, then webp, then the rest are ran async.
//If you want something ran after, you can add something like 'example'
gulp.task('default',function(callback){
    runSequence('clean','webp',['responsive-jpg','responsive-webp','copy-data','copy-sw'],'example'),callback
});
// =======================================================================// 
//                  Images and fonts                                      //        
// =======================================================================//  
gulp.task('responsive-jpg',function(){
    gulp.src('src/images/*')
    .pipe(responsive({
        '*.jpg':[
        {width:1600, suffix: '_large_1x', quality:40},
        {width:800, suffix: '_medium_1x', quality:70},
        {width:550, suffix: '_small_1x', quality:100}
    ]
    }))
    .pipe(gulp.dest('build/images'));
});
gulp.task('responsive-webp',function(){
    gulp.src('src/images/*')
    .pipe(responsive({
        '*.webp':[
        {width:1600, suffix: '_large_1x', quality:40},
        {width:800, suffix: '_medium_1x', quality:70},
        {width:550, suffix: '_small_1x', quality:80}
    ]
    }))
    .pipe(gulp.dest('build/images'));
});
gulp.task('webp', () =>
    gulp.src('src/images/*.jpg')
        .pipe(webp())
        .pipe(gulp.dest('src/images'))
);
gulp.task('copy-data', function () {
    gulp.src('./src/data/*.json')
        .pipe(gulp.dest('./build/data'));
});
gulp.task('copy-sw', function () {
    gulp.src('./src/sw.js')
        .pipe(gulp.dest('./build/'));
});

在这里的示例中，我清除旧文件，然后将需要转换为webp的任何图像转换为webp，然后异步执行可以一起运行的任务。你可以在你需要的任何安排中做到这一点。然后，您可以创建一个gulp任务，它甚至指向两个gulp运行序列任务，以使效率加倍。