Gulp.js 事件流合并顺序答案

【问题标题】：Gulp.js event stream merge orderGulp.js 事件流合并顺序
【发布时间】：2014-11-23 04:27:50
【问题描述】：

我正在尝试将 css 和 scss 文件合并到我的构建目录中的 main.css 文件中。它的工作，但不是在正确的顺序。 scss 文件中的样式属性需要位于 main.css 文件的底部，以便它们覆盖其余部分。

我的 Gulp 任务如下所示：

    //CSS
gulp.task('css', function () {
    var cssTomincss = gulp.src(['dev/css/reset.css', 'dev/css/style.css','dev/css/typography.css',    'dev/css/sizes.css']);

    var cssFromscss = gulp.src(['dev/css/*.scss'])
        .pipe(sass());

    return es.merge(cssTomincss, cssFromscss)
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

我首先用变量定义源。我正在使用 gulp-sass 插件将 scss 文件转换为普通 css (.pipe(sass))，然后使用 es.merge 函数将两者合并并将它们连接到 main.css。

问题在于 .scss 文件的样式属性最终位于 main.css 文件的顶端某处。我需要他们在底部。所以它们需要在底部连接起来。

关于如何做到这一点的任何线索？

【问题讨论】：

标签： javascript concatenation gulp event-stream gulp-sass

【解决方案1】：

试试streamqueue。

var streamqueue = require('streamqueue');

gulp.task('css', function () {
    return streamqueue({ objectMode: true },
            gulp.src(['dev/css/reset.css', 'dev/css/style.css', 'dev/css/typography.css', 'dev/css/sizes.css']),
            gulp.src(['dev/css/*.scss']).pipe(sass())
        )
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

This cheatsheet 会帮助你。 PDF 在这里。

【讨论】：

好吧，这太棒了。有效！研究了一下，我现在明白了。非常感谢！
嗨！感谢您，我正在使用流队列.. 但遇到问题 :( 介意看看吗？stackoverflow.com/questions/28522916/…
streamqueue 总是抛出“Cannot switch to old mode now”。使用 merge-stream 然后 gulp-order 可以工作。
它没有以正确的顺序连接它们:(即使我在流队列中颠倒了顺序，它仍然输出相同（错误）的方式。那怎么会......？

【解决方案2】：

看来插件 gulp-order 非常适合您的情况。

它允许您使用自己的glob 模式重新排序传递的stream，例如基于您的代码：

return es.merge(cssTomincss, cssFromscss)
    .pipe(order([
      'dev/css/reset.css',
      'dev/css/style.css',
      'dev/css/typography.css',
      'dev/css/sizes.css',
      'dev/css/*.css',
    ]))
    .pipe(concat('main.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))

这样做的一个缺点是您必须重新声明您的 globs，但您可以通过将您的 globs 分配给一个值然后将它们连接到您的 order 管道中，这样会更干净。

如果文件未正确排序，您可能必须按照自述文件中的说明将 gulp-order 的 base 选项设置为 .。

另一种方法是使用 stream-series，与 event-stream 基本相同，但您的流的顺序会保留，您不会必须重写你的globs。

【讨论】：

有时它没有按预期拾取路径。使用.pipe(order[path1, path2], { base: '.' }) 解决了它。
嗯，文件在不同的文件夹吗？将在我的答案中添加此信息，谢谢。
很好的答案 - 只是提醒关注此答案的人，您需要通过 npm 安装 gulp-order 并将其导入 gulp 文件的顶部。

【解决方案3】：

我尝试了 gulp-order 没有成功：不知怎么的，订单没有被考虑在内。

对我有用的解决方案是使用Aperçu提到的stream-series。

return streamSeries(
    cssTomincss,
    cssFromscss)
    .pipe(concat('main.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'));

【讨论】：

【解决方案4】：

我提供的所有答案都失败了，它们产生了一些无声的错误。最后merge2 为我工作（好像有gulp-merge，后来项目被重命名为merge2）。我不确定为什么需要 streamify 插件，例如使用 Rollup 创建的流可能会产生带有 gulp-concat、gulp-uglify 或 gulp-insert 的“stream-not-supported-errors”。

const mergeStreams = require('merge2');
const streamify = require('streamify');
...
gulp.task('build', () => {
    const streams = sources.map(createJSFile);
    return mergeStreams(...streams)
        .pipe(streamify(concat('bundle.js')))
        .pipe(streamify(uglify()))
        .pipe(gulp.dest('./dist'));
});

【讨论】：