Gulp：在一个任务中使用另一个任务的输出

Question

我有三个 gulp 任务，其中最后一个任务(allScripts)会先运行两个依赖任务，然后将它们的结果文件合并。

在最后一个任务中，我可以删除前两个任务产生的结果文件，并且通过合并文件来获得所需的文件。

但是我在想，是否可能通过某种方式将它们直接传输到 allScripts 任务中，以避免使用这两个临时文件？

gulp.task('firstGroup', function() {
  return gulp.src('some/files/*.js')
    .pipe(doSomething())
    .pipe(concat('some-scripts.js'))
    .pipe(gulp.dest('dest'));
});

gulp.task('secondGroup', function() {
  return gulp.src('some/other/files/*.js')
    .pipe(doSomethingElse())
    .pipe(concat('some-other-scripts.js'))
    .pipe(gulp.dest('dest'));
});

gulp.task('allScripts', ['firstGroup','secondGroup'], function() {
  return gulp.src(['dest/some-scripts.js','dest/some-other-scripts.js'])
    .pipe(concat('all-scripts.js'))
    .pipe(gulp.dest('dest'))
    // delete the two src-files
});

- EricC

Answer 1

如果所有的任务都可以被视为单个任务，您可以使用gulp-merge插件将多个流合并为一个。如果需要保持任务的分离，也有一种解决方法，但请注意该方法是一种hack方法，因为它依赖于Gulp中的一个公开属性。

如果没有hack方法，那么在另一个任务中使用一个任务的输出将需要中间存储，就像您正在使用文件一样。

单个任务解决方案：

这是一个使用gulp-merge的基本演示：

var gulp = require('gulp');
var gulpMerge = require('gulp-merge');
var concat = require('gulp-concat');
var replace = require('gulp-replace');

gulp.task('all-txt', function() {
    return gulpMerge(
            gulp.src('file1.txt')
                .pipe(replace(/foo/g, 'bar')),
            gulp.src('file2.txt')
                .pipe(replace(/baz/g, 'qux'))
        )
        .pipe(concat('all-text.txt'))
        .pipe(gulp.dest('dest'));
});

在您的情况下，使用您问题中的代码，它将如下所示：

var gulp = require('gulp');
var gulpMerge = require('gulp-merge');
var concat = require('gulp-concat');
// ... your plugins

gulp.task('allScripts', function() {
    return gulpMerge(
            gulp.src('some/files/*.js')
                .pipe(doSomething())
                .pipe(concat('some-scripts.js')),
            gulp.src('some/other/files/*.js')
                .pipe(doSomethingElse())
                .pipe(concat('some-other-scripts.js'))
        )
        .pipe(concat('all-scripts.js'))
        .pipe(gulp.dest('dest'));
});

多任务解决方案:

如果您的任务结构不适合使用上述方法合并为单个任务，则此方法是最佳选择。它有点hacky，因为它依赖于Gulp.tasks，这是一个非标准的公开属性。不能保证它会在未来的Gulp版本中正常工作（目前已测试过Gulp v3.8.10）。

此代码片段依赖于event-stream包，因为它更健壮，并且我在runTasksAndGetStreams函数中使用了其中一些实用程序。

var gulp = require('gulp');

var concat = require('gulp-concat');
var replace = require('gulp-replace');
var es = require('event-stream');


gulp.task('all-txt', function() {
    return es.merge.apply(null, runTasksAndGetStreams(['file1-txt', 'file2-txt']))
        .pipe(concat('all-text.txt'))
        .pipe(gulp.dest('dest'));
});


gulp.task('file1-txt', ['random-task-dep'], function() {
    return gulp.src('file1.txt')
        .pipe(replace(/foo/g, 'bar'));
});

gulp.task('file2-txt', function() {
    return gulp.src('file2.txt')
        .pipe(replace(/baz/g, 'qux'));
});

gulp.task('random-task-dep', function() {
    return gulp.src('random-file.txt')
        .pipe(gulp.dest('dest'));
});



// Run the given tasks and returns their streams
// This will also take care of any task dependencies
//
// This is basically a custom gulp task orchestartor.
//
// Written for this SO question: https://dev59.com/Bl4c5IYBdhLWcg3wFW6N
// Gist: https://gist.github.com/MadLittleMods/d4083d2ba35e2f850161
//
// Params:
//      taskNames: string or array of strings of task names
//      debugLog: *optional* boolean to print some debug information to the console
function gulpRunTasksAndGetStreams(taskNames, /*optional*/debugLog) {
    // You can pass in a single task or an array of tasks to complete
    taskNames = [].concat(taskNames);

    // We polyfill the pieces of `gulp-util` that we use in case some one wants to use it without installing `gulp-util`
    var gutil;
    try {
        gutil = require('gulp-util');
    }
    catch(err) {
        gutil = {
            log: console.log,
            colors: {
                cyan: function(str) {
                    return str;
                },
                magenta: function(str) {
                    return str;
                }
            }
        };
    }

    var resultantTaskInfo = [];
    var taskMap = gulp.tasks;

    // Satisfy all of the task dependencies, create a placeholder stream, and collect the func 
    // to make the real stream to feed in later when the dependencies are done `mergedDepStream.on('end')`
    var mergedDepStream = null;
    taskNames.forEach(function(taskName) {
        var task = taskMap[taskName];

        if(debugLog) {
            gutil.log('root task:', gutil.colors.cyan(taskName), 'started working');
        }

        // Run any dependencies first
        var depStreamResult = runDependenciesRecursivelyForTask(taskName, taskMap);

        if(depStreamResult) {
            mergedDepStream = mergedDepStream ? es.merge(mergedDepStream, depStreamResult) : depStreamResult;
        }

        if(debugLog) {
            if(depStreamResult) {
                depStreamResult.on('end', function() {
                    gutil.log('root task:', gutil.colors.cyan(taskName), 'deps done');
                });
            }
            else {
                gutil.log('root task:', gutil.colors.cyan(taskName), 'no deps present');
            }
        }

        // Then push the task itself onto the list
        resultantTaskInfo.push({
            stream: es.through(),
            fn: task.fn
        });
    });

    // Once all of the dependencies have completed
    mergedDepStream.on('end', function() {

        if(debugLog) {
            gutil.log('All dependencies done, piping in real root tasks');
        }

        // Pipe the actual task into our placeholder
        resultantTaskInfo.forEach(function(taskInfo) {
            var actualTaskStream = taskInfo.fn();
            actualTaskStream.pipe(taskInfo.stream);
        });
    });


    // Recursively gets all of dependencies for a task in order
    function runDependenciesRecursivelyForTask(taskName, taskMap, mergedDependencyStream) {
        var task = taskMap[taskName];

        task.dep.forEach(function(depTaskName) {
            var depTask = taskMap[depTaskName];
            if(debugLog) {
                gutil.log('dep task:', gutil.colors.cyan(depTaskName), 'started working');
            }

            // Dependencies can have dependencies
            var recursiveStreamResult = null;
            if(depTask.dep.length) {
                recursiveStreamResult = runDependenciesRecursivelyForTask(depTaskName, taskMap, mergedDependencyStream);
                mergedDependencyStream = mergedDependencyStream ? es.merge(mergedDependencyStream, recursiveStreamResult) : recursiveStreamResult;
            }

            if(depTask.fn) {
                var whenStreamHandledCallback = function(/* we only use `noDeps` for logging */noDeps) {
                    if(debugLog) {
                        if(!noDeps) {
                            gutil.log('dep task:', gutil.colors.cyan(depTask.name), 'deps done');
                        }
                        else {
                            gutil.log('dep task:', gutil.colors.cyan(depTask.name), 'no deps present');
                        }
                    }

                    var depTaskStream = depTask.fn();
                    // Merge it in overall dependency progress stream
                    mergedDependencyStream = mergedDependencyStream ? es.merge(mergedDependencyStream, depTaskStream) : depTaskStream;
                };

                if(recursiveStreamResult === null) {
                    whenStreamHandledCallback(true);
                }
                else {
                    recursiveStreamResult.on('end', whenStreamHandledCallback);
                }
            }
        });

        return mergedDependencyStream;
    }


    // Return the (placeholder) streams which will get piped the real stream once the dependencies are done
    return resultantTaskInfo.map(function(taskInfo) {
        return taskInfo.stream;
    });
}

- MLM

---

非常好的回答，谢谢，MLM :) 对其他读者的一个警告（也是对MLM的一个问题）：当我阅读gulp-merge的文档时，我发现安装说明使用了另一个名称（gulp-sequence），但那肯定不正确。当我点击github-link时，我被发送到了一个名为merge2的node插件，但它可以用于gulp。所以请注意您实际使用的内容。然后我的问题是：也许这个merge2插件没有你提到的bug，也许这是使用的首选选项（来自该开发人员）？ - EricC

@EricC 如果你正在使用“多任务解决方案”，我已经更新了它，以便正确处理递归依赖项。gulp-merge似乎可以使用这个新的解决方案，但仍然需要event-stream实用程序。一些大块来自调试消息逻辑，如果需要，可以将其剥离。 - MLM

@EricC 任何流合并包都应该可以工作。我不确定为什么在gulp-merge页面上提到了这么多不同的包名称，但它拥有最多的下载量并出现在谷歌搜索结果中。 - MLM

Answer 2

@MLM的想法是正确的，关于合并流。

但不要忘记Gulp只是Javascript。

尝试这个：

const merge = require('merge-stream');
// or pick an alternative stream-merge library: 
//const merge = require('event-stream').merge; //1317 stars on GitHub
//const merge = require('merge-stream');       //102 stars on GitHub
//const merge = require('merge2');             //75 stars on GitHub
//const merge = require('stream-series');      //23 stars on GitHub, keeps events in order
//const merge = require('gulp-merge');         //renamed to merge2
/*const merge = require('streamqueue')         //54 stars on GitHub
    .bind(null, {objectMode: true}); //required for streamqueue vinyl streams
*/

function firstGroup() {
  return gulp.src('some/files/*.js')
    .pipe(doSomething())
    .pipe(concat('some-scripts.js'));
}
gulp.task('firstGroup', funtion() {
  return firstGroup()
    .pipe(gulp.dest('dest'));
});

function secondGroup() {
  return gulp.src('some/other/files/*.js')
    .pipe(doSomethingElse())
    .pipe(concat('some-other-scripts.js'));
}
gulp.task('secondGroup', function() {
  return secondGroup()
    .pipe(gulp.dest('dest'));
});

gulp.task('allScripts', function() {
  return merge(firstGroup(), secondGroup())
    .pipe(concat('all-scripts.js'))
    .pipe(gulp.dest('dest'))
});

可能需要更好地命名任务及其相关函数，比如上述内容。

话虽如此，删除最后一个任务中的文件可能仍然更容易和更清晰。

var del = require('del');

gulp.task('allScripts', ['firstGroup','secondGroup'], function(done) {
  var intermediariesGlob = ['dest/some-scripts.js','dest/some-other-scripts.js'];
  gulp.src(intermediariesGlob)
    .pipe(concat('all-scripts.js'))
    .pipe(gulp.dest('dest'))
    .on('end', function() {
      del(intermediariesGlob)
        .then(function() {done();}); //don't just then(done), the array returned by the promise will become the error parameter of done
    });
});

- Codebling

---

很棒的答案。这与我通常的做法相似，将实际处理代码拆分为一个函数。我的构建任务只调用 build()，它会连接、运行 Babel 等；gzip 任务调用 build().pipe(gzip()).pipe(gulp.dest('./dist/'));，等等。 - Useless Code