30

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

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

4

4 回答 4

56

尝试流队列。

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'))
});

这个备忘单会帮助你。PDF在这里。

于 2014-09-29T11:23:34.553 回答
5

插件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基本相同，但保留了流的顺序，并且您不必重写globs.

于 2014-09-28T21:08:06.973 回答
5

我尝试了gulp-order却没有成功：不知何故，订单没有被考虑在内。

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

return streamSeries(
    cssTomincss,
    cssFromscss)
    .pipe(concat('main.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'));
于 2015-10-19T10:17:11.940 回答
1

我没有提供所有提供的答案，他们产生了一些无声的错误。最后merge2为我工作（似乎有gulp-merge，后来项目被重命名为merge2）。我不确定为什么需要streamify插件，例如使用 Rollup 创建的流可能会产生带有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'));
});
于 2017-06-26T14:18:01.707 回答