Question

我正在尝试将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文件的顶端。我需要他们在底部。所以他们需要在底部连接起来。

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

Answer 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就在这里。

Answer 2

似乎插件 gulp-order 非常适合你的情况。

它允许您使用自己的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'))

这样做的一个缺点是您必须重新声明globs，但是您可以将globs分配给值，然后将其连接到order管道中，更清洁。

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

另一种方法是使用 stream-series ，基本上与 event-stream 相同，但您的流的顺序会被保留，并且您不会＃39; t必须重写globs。

Answer 3

我尝试 gulp-order 但没有成功：订单以某种方式没有被考虑在内。

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

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

Answer 4

我没有提供所有答案，他们产生了一些无声错误。最后merge2为我工作（好像有gulp-merge，后来项目被重命名为merge2）。我不确定为什么streamify插件需要，例如使用Rollup创建的流可能会产生＆＃34;流不支持的错误＆＃34;使用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'));
});

Gulp.js事件流合并顺序

4 个答案: