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，但我在谈论类似 gulp-run-sequence?

的内容

你可以像这样处理各种任务

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，然后我将可以运行的任务异步。您可以根据需要进行任何安排。然后，您可以创建一个 gulp 任务，甚至指向两个 gulp 运行序列任务以提高效率。

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

Gulpfile end of task with two different operations

translation

gulp