如何将gulp-compass编译的文件放到gulp的流中？

Question

我是 gulp 和 gulp-compass 的新手。恕我直言，gulp-compass 在 gulp 的流范例中不起作用。

通常，gulp的任务应该是这样的：

gulp.src('path/to/src')
.pipe(doSth)
.pipe(gulp.dest('path/to/dist'));

但是下面的代码适用于 gulp-compass:

gulp.src('') // <-Empty source is OK
.pipe(compass({
  css: 'path/to/dist/css' // <- This is the output dir
  scss: 'path/to/src/scss' // <- This is the input scss file glob
}));
// No dest is needed!

这导致了我的以下问题。

|- dist
|- scss
    |- app.scss
|- css
    |- bootstrap.css

我想使用gulp-compass将app.scss编译成app.css，然后将app.css与bootstrap.css捆绑在一起，然后缩小并输出为[=21] =].

我想在 ONE gulp.task 内完成此任务。

function buildCss(inputStream) { // minify and output to dist.
    return inputStream
        .pipe(cssnano())
        .pipe(gulp.dest('dist'));
}

gulp.task('css-build', function() {
    var stream = gulp.src('scss/app.scss')
        .pipe(compass({
            css: 'css',
            sass: 'scss'
        }))
        .pipe(gulp.src('css/*.css')); // <-- **HERE** 
    return buildCss(stream);
});

但是，编译后的 app.css 文件未包含在 HERE.

的流中

解决方法是什么？

Answer 1

我可以使用 merge-stream 解决这个问题。

gulp.task('css', function() {
    var scss = gulp.src('scss/*.scss')
    .pipe(compass({
        css: 'css',
        sass: 'scss'
    }));
    var css = gulp.src('css/bootstrap.css');
    var stream = merge(scss, css)
    .pipe(concat('app-release.css'));
    return buildCss(stream);
});

如何将gulp-compass编译的文件放到gulp的流中？

How to put the file compiled by gulp-compass into gulp's stream?

sass

minify

node.js

compass

gulp-compass