【问题标题】:Gulp: Use output from one task in another taskGulp:在另一个任务中使用一个任务的输出
【发布时间】:2015-02-05 00:44:19
【问题描述】:

我有三个 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
});

【问题讨论】:

    标签: node.js stream gulp


    【解决方案1】:

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

    如果没有破解解决方案,在另一个任务中使用一个任务的输出,将需要中间存储,就像您对文件所做的那样。

    单任务解决方案:

    这是一个使用 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'));
    });
    

    多任务解决方案:

    如果您的任务结构无法使用上述方法将它们合并为单个任务,那么这是您的最佳选择。从某种意义上说,它依赖于Gulp.tasks,这是一个非标准的公开属性,这有点hacky。无法保证这将适用于 Gulp 的未来版本(目前使用 Gulp v3.8.10 进行测试)。

    这个 sn-p 依赖于 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: http://stackoverflow.com/q/28334314/796832
    // 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;
        });
    }
    

    【讨论】:

    • 很好的答案,谢谢,传销 :) 只是对其他读者的警告(以及对传销的一个问题):当我阅读为gulp-merge 提供的文档时,我看到安装说明使用了另一个名称( gulp-sequence),但这是不正确的。当我点击github-link 时,我会被发送到一个名为merge2 的节点插件,但它可以在gulp 中使用。因此,请注意您实际使用的内容。然后我的问题:也许这个merge2插件没有你提到的错误,也许这是新的首选选项(来自这个开发者)?
    • @EricC 如果您使用的是“多任务解决方案”,我对其进行了更新以正确处理递归依赖项。 gulp-merge 似乎适用于这个新解决方案,但它仍然需要 event-stream 实用程序。其中一些来自调试消息传递逻辑,如果需要,您可以将其删除。
    • @EricC 任何流合并包都应该工作。我不知道为什么gulp-merge 页面上提到了这么多不同的软件包名称,但下载次数最多并出现在 google 上。
    【解决方案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
        });
    });
    

    【讨论】:

    • 很好的答案。这类似于我通常的做法,将实际的处理代码分解为一个函数。我的构建任务只是调用build(),它连接、运行 babel 等; gzip任务调用build().pipe(gzip()).pipe(gulp.dest('./dist/'));
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多