如何強制Gulp任務等待，直到本地函數從HTTP請求返回其結果？

Question

這不應該太難處理，我想要一個常規的回調方法來暫停正在執行的gulp任務，因為它在其中執行了http請求。

gulp.task('html', function() {
var params = {
    apiKey: '*****',
    spaceId: '******',
    opts:{
        filter: '*****',
        level: 3
    }
};
return $.remoteSrc(languages, {
    base: 'https://api',
    qs: {
        index: 'id',
        fallback: 'en',
        key: '****'
    }
})
    .on('error', onError)
//here the following function should wait for the result from the   secondFunction, which is only avaible after the gulp task finishes execution
    .pipe($.foreach(function(stream, file) {
        var data = JSON.parse(String(file.contents));
        data.lang = file.path.match(/([^\/]+)(?=\.\w+$)/)[0];
        params.locale = _.keys( _.pick(languageKeys, data.lang)) + _.values(_.pick(languageKeys, data.lang));
       result = secondFunction(params);


        return gulp.src(dist + '*.html')
            .pipe($.template(data)).on('error', onError)
            .pipe(gulp.dest(dist + path.basename(file.path, '.json')));
    }));
});

var secondFunction = function (params) {
    return  contentfulData (params,  function (err, result) {
        if(!err) {
            //do something
            console.log('first'+ result);
            // console.log(result);
            return result;
        }
    
    });
};

Answer 1

解決方案是使用promise並將任務執行分為一個主任務和一個依賴任務，問題是在將控制權傳遞給pipe（$。template（data））之前，對有內容的請求沒有得到解決。

在響應返回到API之前生成臨時模板，使用在合並內容並生成解決方案的模板之前已解決的promise數組

    gulp.task('html',['contentful-faq'], function() {

    Promise.all(contentfulPromises).then(function (result) {
//did something with the result here      
            }
        }
    });

    return $.remoteSrc(languages, {
        base: 'https://API/PATH',
        qs: {
            index: 'id',
            fallback: 'en',
            key: 'abc123'
        }
    })
        .on('error', onError)
        .pipe($.foreach(function(stream, file) {
            var data = JSON.parse(String(file.contents));
            data.lang = file.path.match(/([^\/]+)(?=\.\w+$)/)[0];

            data.faq = _.merge(data.faq, contentfulResult[data.lang+languageKeys[data.lang]]);
            return gulp.src(dist + '*.html')
                .pipe($.template(data))
                .on('error', onError)
                .pipe($.if(isProduction, $.htmlmin({
                    collapseWhitespace: true,
                    conservativeCollapse: true,
                    removeComments: true,
                    useShortDoctype: true,
                    collapseBooleanAttributes: true,
                    removeRedundantAttributes: true,
                    removeEmptyAttributes: true,
                    minifyJS: true,
                    minifyCSS: true
                })))
                .pipe(gulp.dest(dist + path.basename(file.path, '.json')));
        }));
});

//Get faq from contenful
var contentfulPromises = [];
gulp.task('contentful-faq', function (cb) {
    var that = this;
    var params = {
        apiKey: 'xxxxxxxxx',
        spaceId: 'abc123',
        opts: {
            filter: 'abc123',
            level: 3,
            order: 'fields.order'
        }
    };
    var getContenful = function (params) {
        for (var lang in languageKeys) {
            params.locale = _.keys(_.pick(languageKeys, lang)) + _.values(_.pick(languageKeys, lang));
            contentfulPromises.push(new Promise(function (resolve, reject) {
                contentfulData(params, function (err, result) {
                    resolve(result);
                });
            }));
        }
        Promise.all(contentfulPromises)
            .then(function (results) {
            that.emit('end');
        })
            .then(function (err) {
                cb(err);
            });
    }(params);
}).on('end', function (results) {
});