javascript Gulp.js 事件流合并顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26088718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gulp.js event stream merge order
提问by Jabba Da Hoot
I am trying to merge css and scss files into a main.css file that goes in my build directory. Its working, but not in the right order. The style attributes from the scss files need to be in the bottom of the main.css file so they overrule the rest.
我正在尝试将 css 和 scss 文件合并到我的构建目录中的 main.css 文件中。它可以工作，但顺序不正确。scss 文件中的样式属性需要位于 main.css 文件的底部，以便它们覆盖其余部分。
my Gulp task looks like this:
我的 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'))
});
I am defining the sources first with variables. I am using the gulp-sass plugin to convert the scss file into normal css (.pipe(sass)) and later merging the two with the es.merge function and concatenating them into main.css.
我首先用变量定义源。我正在使用 gulp-sass 插件将 scss 文件转换为普通的 css (.pipe(sass))，然后将两者与 es.merge 函数合并并将它们连接到 main.css。
The problem is that the style attributes van the .scss files end up somewhere in the top end of the main.css file. I need them to be at the bottom. So they need to be concatenated at the bottom.
问题是 .scss 文件的样式属性最终位于 main.css 文件的顶端。我需要他们在底部。所以它们需要在底部连接起来。
Any clue on how to do this?
关于如何做到这一点的任何线索？
回答by Tsutomu Kawamura
Try 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 cheatsheetwill help you. PDFis here.
回答by Balthazar
It seems that the plugin gulp-orderfits perfectly well in your case.
似乎插件gulp-order非常适合您的情况。
It allows you to re-order the passed streamwith your own globpattern, for example based on your code :
它允许您stream使用自己的glob模式重新排序传递的内容，例如根据您的代码：
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'))
One drawback of this is that you have to re-declare your globs, but you can get around by assign your globsto a value and then concat them in you orderpipe, much cleaner.
这样做的一个缺点是您必须重新声明您的globs，但是您可以通过将您globs的值分配给一个值，然后将它们连接到您的order管道中，这样更简洁。
You may have to set the baseoption to .of gulp-orderas stated in their Readme if the files were not ordered correctly.
如果文件的顺序不正确，您可能必须按照自述文件中的说明将base选项设置为.of gulp-order。
One another way would be to use stream-series, basically the same as event-stream, but the order of your stream is preserved, and you don't have to rewrite your globs.
另一种方法是使用stream-series，基本上与event-stream相同，但保留流的顺序，并且您不必重写globs.
回答by Blackbird
I tried gulp-orderwithout success: the order somehow wasn't taken into account.
我尝试了gulp-order没有成功：不知何故没有考虑订单。
The solution which worked for me was using stream-series, mentioned by Aper?u.
对我有用的解决方案是使用Aper?u提到的stream-series。
return streamSeries(
cssTomincss,
cssFromscss)
.pipe(concat('main.css'))
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'));
回答by Alexander Shutau
I failed with all provided answers, they produced some silent errors. Finally merge2worked for me (seems like there was gulp-mergeand later the project was renamed into merge2). I'm not sure why there is a need in streamifyplugin, e.g. streams created with Rollup may produce "stream-not-supported-errors" with gulp-concat, gulp-uglifyor gulp-insert.
我所有提供的答案都失败了，他们产生了一些无声的错误。最后merge2对我来说有效（似乎有gulp-merge，后来项目被重命名为merge2）。我不确定为什么需要streamify插件，例如使用 Rollup 创建的流可能会产生“stream-not-supported-errors”与gulp-concat,gulp-uglify或gulp-insert。
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'));
});
